Warum funktioniert die vertikale Ausrichtung nicht richtig, wenn Float in CSS verwendet wird?

Lesezeit: 4 Minuten

Benutzer1355300

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

Ich versuche Folgendes, wenn Sie den Float von allen Divs entfernen, 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

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/

wenn du einstellst line-height mit gleichem Wert für alle Elemente die vertical-align ist nutzlos. (jsfiddle.net/VBR5J/448)

– Ederson T. Szlachta

11. Mai 2015 um 14:17 Uhr
Funktioniert nicht für <button> Elemente. Anstatt von <span> ist ein <button>.

– Grün

1. September 2015 um 7:26 Uhr
Diese Antwort ist falsch. vertical-align gehört auf den CONTAINER (the div) nicht die einzelnen Elemente. Die richtige Lösung – die schwebende Elemente vertikal ausrichten kann – besteht darin, beides zu setzen vertical-align und line-height auf dem BEHÄLTER: <div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">. LÖSCHEN vertical-align:middle; line-height: 38px; aus den Span-Stilen.

– WerkzeugmacherSteve

14. Mai 2016 um 0:08 Uhr
Ich habe gerade entdeckt, dass das, was ich vorschlage, für die schwebenden Spannen in der Geige der Antwort funktioniert, aber nicht für einige Elemente (fehlgeschlagen für eine schwebende Funkeingabe).

– WerkzeugmacherSteve

14. Mai 2016 um 0:18 Uhr
@ToolmakerSteve ist falsch, und diese Antwort ist falsch. Vertical-align gilt nur für Inline-Elemente, Inline-Blöcke oder Tabellenzellen (letzteres ist einfach komisch). Das Hinzufügen eines ‘float’ macht ein Element zu einem Blockelement. Dennoch kann die Verwendung von line-height (und das Ignorieren von vertical-align) eine Lösung sein.

– Gemeiner Hecht

21. März 2018 um 14:56 Uhr

Ahsan Khurshid

Bearbeitet:

Das vertikal ausrichten Die CSS-Eigenschaft gibt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Table-Cell-Elements an.

Lesen Sie diesen Artikel für Vertikale Ausrichtung verstehen

Es gilt für inline-block Elemente auch.

– Rolf

22. Oktober 2017 um 12:20 Uhr
Aktualisiert. Das habe ich vermisst. Danke für die Erwähnung.

– Ahsan Khurshid

7. November 2017 um 5:56 Uhr
das ist keine antwort

– Serzhan Achmetow

6. März 2020 um 1:57 Uhr

Gabriel

Die vertikale Ausrichtung funktioniert tatsächlich nicht mit schwebenden Elementen. Das liegt daran, dass Float das Element aus dem normalen Fluss des Dokuments heraushebt. Vielleicht möchten Sie andere vertikale Ausrichtungstechniken verwenden, wie die auf Transformation, Anzeige: Tabelle, absolute Positionierung, Zeilenhöhe, js (vielleicht letzter Ausweg) oder sogar die einfache alte HTML-Tabelle (vielleicht die erste Wahl, wenn der Inhalt eigentlich tabellarisch). Sie werden feststellen, dass es zu diesem Thema eine hitzige Debatte gibt.

So 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; 
}

Nicht sicher, warum Sie beide mit fester Breite benötigen, Anzeige: Inline-Block und Floating.

Könnten Sie Ihrer Antwort einen Code hinzufügen, um zu zeigen, wie Sie die Lösung erreichen?

– Abarison

7. April 2015 um 10:09 Uhr
Außerdem ist die “richtige Antwort” so leicht zu brechen … ich frage mich, wie um alles in der Welt 19 Leute dafür gestimmt haben.

– Gabriel

10. April 2015 um 12:07 Uhr
Die Frage lautete: “Er braucht das Float: rechts auf dem letzten Element”, also muss das letzte Element möglicherweise auf der rechten Seite des Containers sein. Wie erreichen Sie dieses Ziel in Ihrer Antwort?

– Benutzer4269941

10. August 2016 um 2:07 Uhr
Gute Antwort, und außerdem so klar! Es fehlt nur die Flexbox-Option.

– Luillyfe

13. Mai 2017 um 22:22 Uhr
Diese Lösung zeigt das letzte Element nicht rechtsbündig an. Sehen: jsfiddle.net/eprky4q1

– Skrol29

31. März um 6:52 Uhr

14297600cookie-checkWarum funktioniert die vertikale Ausrichtung nicht richtig, wenn Float in CSS verwendet wird?

#CSS #html #Vertikale Ausrichtung