CSS: Wie kann man ein "Label" und eine "Eingabe" innerhalb eines "Div" vertikal ausrichten?

89

Betrachten Sie den folgenden Code :

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

Was wäre die einfachste Methode, um das labelund das inputin die Mitte des div(vertikalen) zu setzen?

Mischa Moroshko
quelle
1
Meines Wissens lautet das Fazit "Sie können nicht", und der faulste Weg, dies zu umgehen, besteht darin, ein einfaches zu verwenden <table>und es valign='middle'auf sein <td>s anzuwenden .
BeemerGuy

Antworten:

94

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}
<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

Der Vorteil dieser Methode besteht darin, dass Sie divdie Höhe des Textfelds und die Höhe des Textfelds sowie die Schriftgröße ändern können und alles immer in der Mitte bleibt.

http://jsfiddle.net/53ALd/6/

Marc-François
quelle
1
sieht elegant aus :) weiß jemand, wie browserkompatibel diese Methode ist?
Zaven Nahapetyan
1
Für IE funktioniert es meiner Meinung nach nur mit IE8 oder besser. Für die anderen Webbrowser ist es in Ordnung.
Marc-François
1
Ich wusste nichts über das display: table-cell. Wird das in bestimmten Browsern unterstützt?
BeemerGuy
6
@ Mischa Sie sollten die Tatsache angegeben haben, dass Ihre Eingabe / Beschriftung absolut positioniert waren. Das ändert die Umstände der Frage völlig. Ich gebe Marc eine +1. Gute Antwort.
Jessegavin
2
Ich bin mir ziemlich sicher, dass der Punkt, den Jenson anstrebte (und hätte artikulieren sollen), darin besteht, dass sich die Verwendung von make divs so display: table-cellverhält, wie es nicht erwartet wird, z. B. nachfolgendes Rendern von divs in derselben Zeile / etc.
Taswyn
72

Ein moderner Ansatz wäre die Verwendung einer CSS-Flexbox.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}
<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Ein komplexeres Beispiel ... Wenn Sie mehrere Elemente im Flex-Flow haben, können Sie Align-Self verwenden, um einzelne Elemente anders als das angegebene Align auszurichten ...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}
<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

Es ist auch super einfach, horizontal und vertikal zu zentrieren:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}
<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Holger Will
quelle
Ich wünschte, dies würde funktionieren, wenn ein Bild und ein Text in das Etikett eingewickelt sind. Ich habe ein kleines Symbol gefolgt von Text, aber der Text bewegt sich nicht.
Kevin Scharnhorst
Es funktioniert, wenn Beschriftung und Text separate Elemente sind oder wenn Sie Ihr Etikett auch zu einer Flexbox machen ...
Holger Will
display:flexhat weniger Kompatibilität, funktioniert auf Chrom 29+
14

Dies funktioniert browserübergreifend, bietet mehr Zugänglichkeit und weniger Markup. Graben Sie die div. Wickeln Sie das Etikett ein

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>
albert
quelle
3
Dies funktioniert offensichtlich nicht für ein zweizeiliges Etikett. Und wenn Sie sicher sind, dass das Etikett immer einzeilig ist, gibt es Millionen anderer Alternativen.
Lashae
14
Die Frage bezog sich auf ein einzeiliges Etikett, und ich antwortete entsprechend. Ich bin mir nicht sicher über deine Punkte oder Absichten hier, aber wenn x so offensichtlich ist, solltest du eine Million Beispiele dafür machen. Zumindest können Sie sich unter meiner Antwort freuen und die Kraft Ihrer Millionen Siege spüren. Bravo.
Albert
2
Dies ist die beste Antwort für einzeilige Beschriftungen. In der Spezifikation heißt es: "Wenn das Attribut for nicht angegeben ist, das Beschriftungselement jedoch einen beschriftbaren formularassoziierten Elementnachkommen hat, ist der erste derartige Nachkomme in Baumreihenfolge das beschriftete Steuerelement des Beschriftungselements." Daher ist dies der einzige Ansatz, bei dem Sie die Attribute forund idfür maximale Einfachheit weglassen können .
Parlament
8

Ich bin mir bewusst, dass diese Frage vor über zwei Jahren gestellt wurde, aber für alle neueren Zuschauer ist hier eine alternative Lösung, die einige Vorteile gegenüber Marc-François 'Lösung hat:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

Hier fügen wir einfach nur einen line-heightWert hinzu, der der Höhe des Div entspricht. Der Vorteil besteht darin, dass Sie jetzt die Anzeigeeigenschaft des div nach inline-blockBelieben ändern können und der Inhalt vertikal zentriert bleibt. Die akzeptierte Lösung erfordert, dass Sie das div als Tabellenzelle behandeln. Dies sollte perfekt funktionieren, browserübergreifend.

Der einzige andere Vorteil ist, dass es nur noch eine CSS-Regel statt zwei gibt :)

Prost!

MusikAnimal
quelle
6

Verwenden Sie paddingauf der div( oben und unten ) und vertical-align:middleauf der labelund input.

Beispiel unter http://jsfiddle.net/VLFeV/1/

Gabriele Petrioli
quelle
Das funktioniert bei der jsfiddle nicht. Ich habe die Höhe des geändert divund der Inhalt im Inneren hat sich überhaupt nicht bewegt. Vermisse ich etwas
BeemerGuy
Meiner Meinung nach sollten Layouts keine festen Pixelhöhen haben… Layouts sollten flüssig um den Inhalt fließen. Ich komme jedoch von einem Tag und einer Zeit, an denen Browser beim Vergrößern und Verkleinern die Textgröße skalierten. Neuere Browser skalieren tatsächlich die gesamte Seite, sodass das Einstellen der Pixelhöhe etwas besser funktioniert. Es gibt jedoch ganz neue Gründe, die Einstellung von Pixelhöhen zu vermeiden… zum Beispiel reaktionsschnelle Layouttechniken. Deshalb wäre dies meine bevorzugte Methode.
Thirdender
3

Wickeln Sie das Etikett ein und geben Sie es in ein anderes Div mit einer definierten Höhe ein. Dies funktioniert möglicherweise nicht in IE-Versionen unter 8.

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;
Trevor
quelle
0

Sie können die display: table-cellEigenschaft wie im folgenden Code verwenden:

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }
abahet
quelle