Wyrównanie w pionie CSS nie działa z wartością zmiennoprzecinkową

85

Jak mogę używać vertical-alignjak również floatwe divwłaściwościach? vertical-alignDziała dobrze, jeśli nie używać float. Ale jeśli używam pływaka, to nie działa. Ważne jest, aby użyć float:rightostatniego div.

Próbuję wykonać następujące czynności, jeśli usuniesz zmiennoprzecinkowe ze wszystkich elementów div, to będzie działać dobrze:

<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
źródło

Odpowiedzi:

92

Musisz ustawić wysokość linii.

<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.
źródło
31
jeśli ustawisz tę line-heightsamą wartość dla wszystkich elementów, vertical-alignjest bezużyteczna. ( jsfiddle.net/VBR5J/448 )
Éderson T. Szlachta
Nie działa dla <button>elementów. Zamiast <span>jest <button>.
Green
14
Ta odpowiedź jest błędna. wyrównanie pionowe należy do KONTENERA (a div), a nie do poszczególnych elementów. Prawidłowe rozwiązania - zdolną do pionowego nastawiania się elementów pływających - jest umieszczenie zarówno vertical-alignoraz line-heightna pojemniku: <div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">. USUŃ vertical-align:middle; line-height: 38px;ze stylów rozpiętości.
ToolmakerSteve
1
Właśnie odkryłem, że to, co sugeruję, działa dla pływających rozpiętości w skrzypcach odpowiedzi, ale nie dla niektórych elementów (nie powiodło się dla pływającego wejścia radiowego).
ToolmakerSteve
1
@ToolmakerSteve się myli, a ta odpowiedź jest błędna. Wyrównanie w pionie dotyczy tylko elementów wbudowanych, bloków wbudowanych lub komórek tabeli (ta ostatnia jest po prostu dziwna). Dodanie „float” powoduje, że element en staje się elementem blokowym. Mimo to, rozwiązaniem może być użycie wysokości linii (i ignorowanie wyrównania w pionie).
commonpike,
15

Edytowano:

Właściwość CSS vertical-align określa pionowe wyrównanie elementu inline, inline-block lub table-cell.

Przeczytaj ten artykuł, aby dowiedzieć się, jak wyrównać w pionie

Ahsan Khurshid
źródło
1
Dotyczy to inline-blockrównież elementów.
Rolf
1
Zaktualizowano. Brakowało mi tego. Dzięki za wzmiankę.
Ahsan Khurshid
3
to nie jest odpowiedź
Serzhan Achmetow
Chociaż ten link może odpowiedzieć na pytanie, lepiej jest zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. - Z recenzji
Utsav Patel
8

W rzeczywistości wyrównanie w pionie nie działa w przypadku elementów pływających. Dzieje się tak, ponieważ zmiennoprzecinkowy podnosi element z normalnego przepływu dokumentu. Możesz użyć innych technik wyrównywania w pionie, takich jak te oparte na transformacji, wyświetlaniu: tabeli, pozycjonowaniu bezwzględnym, wysokości linii, js (może w ostateczności) lub nawet zwykłej starej tabeli html (być może pierwszym wyborem, jeśli treść jest właściwie tabelaryczne). Przekonasz się, że toczy się gorąca debata na ten temat.

Jednak w ten sposób możesz wyrównać w pionie 3 elementy div:

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

Nie jestem pewien, dlaczego potrzebujesz zarówno stałej szerokości, wyświetlania: inline-block, jak i pływającego.

Gabriel
źródło
Czy możesz dodać kod do swojej odpowiedzi, aby pokazać, jak osiągnąć rozwiązanie?
abarisone
Poza tym „poprawna odpowiedź” jest tak łatwa do złamania ... to sprawia, że ​​zastanawiam się, jak na Ziemi 19 ludzi zagłosowało za nią.
Gabriel
3
pytanie brzmiało: „potrzebuje pływaka: bezpośrednio na ostatnim elemencie”, więc może potrzebować, aby ostatni element znajdował się po prawej stronie pojemnika. jak osiągnąć ten cel w swojej odpowiedzi?
fly.x
Dobra odpowiedź, a poza tym taka jasna! Po prostu brakuje opcji Flexbox.
Luillyfe