CSS Vertical align funktioniert nicht mit float - html, css, vertical-alignment

Wie kann ich das verwenden? vertical-align ebenso gut wie float in dem div Eigenschaften? Das vertical-align funktioniert gut, wenn ich nicht die float. Aber wenn ich den Float verwende, funktioniert es nicht. Es ist wichtig für mich, das zu verwenden float:right für die letzte Div.

Ich versuche zu folgen, wenn Sie den Float 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
}

JSFidel

Antworten:

70 für die Antwort № 1

Sie müssen die Zeilenhöhe festlegen.

<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/

---

13 für die Antwort № 2

Bearbeitet:

Das vertikal ausrichten CSS-Eigenschaft gibt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellenelements an.

Lesen Sie diesen Artikel für Vertical-Align verstehen

---

6 für die Antwort № 3

Vertikale Ausrichtung funktioniert nicht mit floatedElemente, in der Tat. Das ist so, weil der Schwimmer das Element aus dem normalen Fluss des Dokuments hebt. Vielleicht möchten Sie andere vertikale Ausrichtung Techniken, wie diejenigen basierend auf Transformation, Anzeige: Tabelle, absolute Positionierung, Zeilenhöhe, js (letzte Möglichkeit vielleicht) oder sogar die einfache alte HTML-Tabelle (vielleicht die erste Wahl, wenn der Inhalt ist) eigentlich tabellarisch). Sie werden feststellen, dass es eine hitzige Debatte über dieses Thema gibt.

Auf diese Weise können Sie 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;
}

Nicht sicher, warum Sie beide feste Breite benötigt, Anzeige: Inline-Block und Floating.

---