CSS Vertical Align funktioniert nicht mit Float

85

Wie kann ich die vertical-alignsowie floatin den divEigenschaften verwenden? Das vertical-alignfunktioniert gut, wenn ich das nicht benutze float. Aber wenn ich den Schwimmer benutze, funktioniert er nicht. Es ist wichtig für mich, das float:rightfür die letzte Div zu verwenden.

Ich versuche zu folgen, wenn Sie den Schwimmer von allen Divs entfernen, dann würde es gut funktionieren:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

user1355300
quelle

Antworten:

92

Sie müssen die Zeilenhöhe einstellen.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

Anders B.
quelle
31
Wenn Sie line-heightfür alle Elemente den gleichen Wert festlegen, vertical-alignist dies unbrauchbar. ( jsfiddle.net/VBR5J/448 )
Éderson T. Szlachta
Funktioniert nicht für <button>Elemente. Anstelle von <span>ist ein <button>.
Grün
14
Diese Antwort ist falsch. Vertikal ausrichten gehört auf den CONTAINER (die div) nicht auf die einzelnen Elemente. Die richtige Lösung - in der Lage, schwimmende Elemente vertikal auszurichten - besteht darin, beide vertical-alignund line-heightden BEHÄLTER aufzusetzen : <div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">. ENTFERNEN Sie vertical-align:middle; line-height: 38px;von den Span-Stilen.
ToolmakerSteve
1
Ich habe gerade herausgefunden, dass das, was ich vorschlage, für die schwebenden Bereiche in der Geige der Antwort funktioniert, aber nicht für einige Elemente (fehlgeschlagen für einen schwebenden Funkeingang).
ToolmakerSteve
1
@ToolmakerSteve ist falsch und diese Antwort ist falsch. Die vertikale Ausrichtung gilt nur für Inline-Elemente, Inline-Blöcke oder Tabellenzellen (letzteres ist nur seltsam). Durch Hinzufügen eines 'float' wird en element zu einem Blockelement. Die Verwendung der Zeilenhöhe (und das Ignorieren der vertikalen Ausrichtung) kann jedoch eine Lösung sein.
Commonpike
15

Bearbeitet:

Die CSS-Eigenschaft " Vertikal ausrichten" gibt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellenelements an.

Lesen Sie diesen Artikel zum Verständnis der vertikalen Ausrichtung

Ahsan Khurshid
quelle
1
Dies gilt auch für inline-blockElemente.
Rolf
1
Aktualisiert. Das habe ich vermisst. Vielen Dank für die Erwähnung.
Ahsan Khurshid
3
Dies ist keine Antwort
Serzhan Akhmetov
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Aus dem Review
Utsav Patel
8

Die vertikale Ausrichtung funktioniert in der Tat nicht mit schwebenden Elementen. Dies liegt daran, dass float das Element aus dem normalen Fluss des Dokuments hebt. Möglicherweise möchten Sie andere vertikale Ausrichtungstechniken verwenden, z. B. solche, die auf Transformation, Anzeige: Tabelle, absolute Positionierung, Zeilenhöhe, js (letzter Ausweg vielleicht) oder sogar der einfachen alten HTML-Tabelle (möglicherweise die erste Wahl, wenn der Inhalt ist) basieren eigentlich tabellarisch). Sie werden feststellen, dass es zu diesem Thema eine hitzige Debatte gibt.

Auf diese Weise können Sie jedoch IHRE 3 Divs vertikal ausrichten:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

Ich bin mir nicht sicher, warum Sie sowohl feste Breite als auch Anzeige benötigen: Inline-Block und Floating.

Gabriel
quelle
Könnten Sie Ihrer Antwort Code hinzufügen, um zu zeigen, wie Sie die Lösung erreichen können?
Abarisone
Außerdem ist die "richtige Antwort" so leicht zu brechen ... ich frage mich, wie um alles in der Welt 19 Menschen dafür gestimmt haben.
Gabriel
3
Auf der Frage stand "Er braucht den Schwimmer: direkt am letzten Element", daher muss sich das letzte Element möglicherweise auf der rechten Seite des Containers befinden. Wie erreichen Sie dieses Ziel in Ihrer Antwort?
fly.x
Gute Antwort und außerdem so klar! Es fehlt nur die Flexbox-Option.
Luillyfe