CSS Vertikale Ausrichtung Mitte

Ich versuche, ein SPAN-Element in der Mitte eines übergeordneten Elements vertikal auszurichten.CSS Vertikale Ausrichtung Mitte

Das ist, was ich tue:

enter image description here

ich sowohl den Benutzernamen und das Passwort Etiketten zu bekommen versuche, vertikal ausgerichtet werden (Mitte) mit den Eingabefeldern.

Das ist mein HTML-Code ist:

<div class="login_field_wrap"> 
    <span>Username</span> 
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username"> 
    <div class="clear"></div> 
</div>

Dies ist, was ich versucht habe:

.clear { clear:both; } 
.login_field_wrap span { 
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; } 
.login_field_wrap input { 
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA; 
margin:0px; width:250px; }

Vertically ein Bildelement innerhalb dieser Verpackung Ausrichten DIV absolut einwandfrei funktioniert, auch in Chrome sowieso, Es passt einfach nicht zu meinem SPAN!

Jede Hilfe wäre erstaunlich.

Quelle

2012-03-28 TheCarver

Bitte seien Sie nett zu Ihren Benutzern und verwenden Sie statt eines generischen '' ein Label, das explizit dem Formularsteuerelement zugeordnet ist: ' Benutzername'. – steveax

@steveax: Ich benutze immer Etiketten für Checkboxen und Radio-Buttons aufgrund ihrer geringeren Größe. Die Verwendung eines Labels erhöht offensichtlich den anklickbaren Bereich, was es einfacher macht, sie zu verwenden, aber ist es wirklich notwendig, eine Beschriftung für ein Textfeld mit 250px x 30px anzugeben? Beim Surfen im Internet habe ich nie auf die Beschriftung einer Textbox geklickt, um mich darauf zu konzentrieren. Gibt es einen weiteren Grund, warum ich ein Etikett verwenden sollte? – TheCarver

Das Erhöhen des Trefferbereichs ist nur ein Vorteil der Verwendung von Labels, der andere wichtige Grund ist für die Nutzer von Screenreadern. Durch das explizite Verknüpfen der Labels mit den Formularsteuerelementen liest der Screenreader die Labels korrekt, wenn das Formularsteuerelement fokussiert ist. – steveax

Vertikales Ausrichten über CSS kann knifflig sein, und während CSS3 eine ganze Reihe von Extras mit sich bringt, ist die CSS3-Unterstützung im aktuellen Browser-Markt glanzlos.

Um diesen Effekt zu erreichen, setze ich die line-height Eigenschaft des untergeordneten Elements gleich der Höhe seines enthaltenden Elements.

Zum Beispiel würde ich folgende CSS:

.login_field_wrap { height:30px; /* or whatever is appropriate for your design */ 
.login_field_wrap span { height:30px; line-height:30px; } 
.login_field_wrap input { height:30px; line-height:30px; }

Der einzige Nachteil von line-height mit vertikal etwas ausrichten, wenn der Text auf eine zweite Linie überläuft, wobei in diesem Fall Ihr Design wird im Wesentlichen brechen.

Quelle

2012-03-28 23:13:53 Moses

Das funktioniert gut, aber Leute sollten wissen, dass, wenn das Elternelement die Größe dynamisch ändert, die Ausrichtung versagt (oder zumindest innerhalb der vordefinierten "Zeilenhöhe: 30px" bleibt). Wenn es sich ändert, sollten Sie die Tabellenanzeige verwenden. In jedem Fall muss die vertikale Ausrichtung relevanter Inline-Elemente verbessert werden. Große Antwort @Moses. –

Ich konnte nie vertical-align in anderem als <td> s arbeiten zu arbeiten.
Eine Problemumgehung, die ich normalerweise verwende, wäre, eine Höhe für .login_field_wrap zu definieren, dann setze die line-height Eigenschaft in deinem <Bereich> gleich .login_field_wrap Höhe.

Quelle

2012-03-28 23:12:32 Paul

Tricky, nicht wahr ?! Ich schaffte es, ein Bildelement vertikal (in der Mitte) in einem Wrapping-DIV auszurichten, aber es wird einfach nicht mit der Spannweite funktionieren !! – TheCarver

-3

Ich denke, Text-Align: Zentrum; sollte auch an Elementen arbeiten. Wenn ich mich nicht täusche, funktioniert das normalerweise auch wenn nicht auf Text.

Quelle

2012-03-28 23:32:16 corvid

Text-Align-Set, um den Text horizontal auszurichten, richtet Text und einige Elemente aus. Ich suche nach einer vertikalen Ausrichtung, die auf Mitte eingestellt ist, wie der Titel der Frage sagt. Danke, dass Sie die Mühe gemacht haben, egal. – TheCarver

Entfernen Sie einfach die float Eigenschaft von Ihrem span class und setzen Sie ihn auf display:inline-block und die vertical-align:middle Eigenschaft arbeiten, etwa so:

.login_field_wrap span { 
    color: #333333; 
    display: inline-block; 
    font-size: 13px; 
    font-weight: bold; 
    text-align: left; 
    vertical-align: middle; 
}

Edit: aufgeräumt Ihren Code ein wenig, hier ist eine Demo, die sollten arbeiten über Browser hinweg. http://jsfiddle.net/kUe3Y/

Quelle

2012-03-28 23:46:44

Das funktionierte auch für meine Sache. Vielen Dank. –

fand ich den einfachste Weg, dies zu tun ist, die übergeordnete Container Anzeigeeigenschaft zu table und der Kind Anzeigeeigenschaft zu table-cell

#parent{ 
    display:table; 
} 

#child{ 
    display:table-cell; 
    vertical-align:middle; 
}

Ich war in der Lage zu setzen, dies zu vertikal bekommen ein Ankerelement ausrichten in einem div.

Ich habe es in die Bedingungen Ihrer Frage in dieser jsFiddle.

Quelle

2014-01-02 15:22:41

CSS Vertikale Ausrichtung Mitte

Antwort

Verwandte Themen