innerhalb eines DIV vertikal ausrichten

[nance]

Hallo zusammen!

Ich will ein INPUT-Tag innerhalb eines DIV vertikal zentrieren. Meines Erachtens nach sollte das mit style="vertical-align: middle;" funktionieren, macht's aber nicht. Liege ich da etwa mit meiner Annahme falsch?

nance

[Zeromancer]

Hallo,

Ich will ein INPUT-Tag innerhalb eines DIV vertikal zentrieren. Meines Erachtens nach sollte das mit style="vertical-align: middle;" funktionieren, macht's aber nicht.

zeige doch mal bitte etwas vom relevanten Quellcode sowie von den relevanten Styles! Es könnte an vielen Sachen liegen.

Mit freundlichen Grüßen

André

[nance]

Hi,

zeige doch mal bitte etwas vom relevanten Quellcode sowie von den relevanten Styles! Es könnte an vielen Sachen liegen.

Dem entnehme ich, dass es grundsätzlich so laufen sollte.

Hier mal der relevante Code:

  
<div class="hauptinfodiv">  
  <form action="{SENDEN/Link}" method="get" name="suchen">  
    <div class="spalte12">  
    </div>  
    <div class="spalte3">  
      <input name="Submit" type="submit" class="schaltflaeche" value="{SF_WEITER}"/>  
    </div>  
  </form>  
</div>  

  
.hauptinfodiv {  
  clear: left;  
  padding: .5em;  
}  
.spalte12 {  
  width: 75%;  
  float: left;  
  margin-top: auto;  
  margin-bottom: auto;  
}  
.spalte3 {  
  text-align: left;  
  height: 100px;  
  border: solid 1px red;  
  vertical-align: middle;  
}  
  
  
.linkKnopf, .schaltflaeche {  
 padding-left: 5px;  
 padding-right: 5px;  
 font-weight : bold;  
 font-size : 1.13em;  
  width: 15em;  
 border-style: outset;  
  text-align: center;  
  vertical-align: middle;  
}  

Gruß

nance

[Gernot Back]

Hallo nance,

Dem entnehme ich, dass es grundsätzlich so laufen sollte.

... , wenn es sich denn um "inline-level and 'table-cell' elements" handeln würde.

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

<div class="hauptinfodiv">
  <form action="{SENDEN/Link}" method="get" name="suchen">
    <div class="spalte12">
    </div>
    <div class="spalte3">
      <input name="Submit" type="submit" class="schaltflaeche" value="{SF_WEITER}"/>
    </div>
  </form>
</div>

  
Gruß Gernot

[nance]

Hallo Gernot,

... , wenn es sich denn um "inline-level and 'table-cell' elements" handeln würde.

Bei Input handelt es sich doch um ein Inline-Element, oder nicht?

Gruß
nance

[Gernot Back]

Hallo nance,

Bei Input handelt es sich doch um ein Inline-Element, oder nicht?

Ja aber bei seinem Eleternelement, einem Div nicht!

Gruß Gernot

[Gernot Back]

Hallo nance,

ich denke, das Einfachste zur Erreichung der von dir verfolgten Ziele dürfte sein, wenn du dem Elternelement mit der class="spalte3" (bietet sich hier nicht vielleicht id="spalte3" an?) position:relative verpasst und deiner Schaltfläche float:left;position:absolute; Sowie an top-Wert und Höhe jeweils ein Drittel der Höhe des Elternelements, also 33px.

Gruß Gernot

[wahsaga]

hi,

und deiner Schaltfläche float:left;position:absolute;

dann kannst du dir das float sparen, wenn du absolut positionierst.

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo:
"2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'"

gruß,
wahsaga

[Gernot Back]

Hallo wahsaga,

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo:
"2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'"

Irgendwie muss ich mir mal angewöhnen jede einzelne CSS-Eigenschaft auf ihre tatsächliche Notwendigkeit hin zu überprüfen. Bei Inline-Elementen ist es mir irgendwann in Fleisch und Blut übergegangen, dass sich sie auf float:left setze, wenn ich ihnen Höhe und Breite zuweisen will. Jetzt sehe ich, dass bei einem <input type="submit" ... > obwohl doch Inline-Element komischerweise weder float:left, noch auch nur display:block noch position:absolute nötig sind, wenn man die Maße des Elements definieren will.

Gruß Gernot

[Ashura]

Hallo Gernot.

Jetzt sehe ich, dass bei einem <input type="submit" ... > obwohl doch Inline-Element komischerweise weder float:left, noch auch nur display:block noch position:absolute nötig sind, wenn man die Maße des Elements definieren will.

Ich habe vor kurzem auch noch einmal erklärt bekommen, dass dies möglich ist, weil es ein „replaced inline element“ ist und daher für diese Eigenschaften empfänglich ist.

Gruß, Ashura

[Gernot Back]

Hallo Ashura,

Ich habe vor kurzem auch noch einmal erklärt bekommen, dass dies möglich ist, weil es ein „replaced inline element“ ist und daher für diese Eigenschaften empfänglich ist.

Ehrlich gesagt mache ich mir immer noch keinen rechten Begriff davon, was da bei "replaced inline elements" im Gegensatz zu "non-replaced inline elements" "er-" bzw. "ver-"setzt sein soll.

Gruß Gernot

[Ashura]

Hallo Gernot.

Ehrlich gesagt mache ich mir immer noch keinen rechten Begriff davon, was da bei "replaced inline elements" im Gegensatz zu "non-replaced inline elements" "er-" bzw. "ver-"setzt sein soll.

Ich auch nicht. :-)
Ich schreibe meinen Code nach Gefühl und Wissen, die genauen Begrifflichkeiten interessieren mich eigentlich nur bei der Syntax.

Gruß, Ashura

[SteBu]

Moin,

es gibt versch. Methoden. Schaust Du hier http://www.aspekt1.net/ms/dev/vertical-align.html

SteBu