O alinhamento vertical CSS não funciona com flutuação

86

Como posso usar o vertical-align, bem como floatnas divpropriedades? A vertical-alignfina funciona se eu não usar o float. Mas se eu usar o flutuador, ele não funciona. É importante para mim usar float:rightpara a última div.

Estou tentando seguir, se você remover o float de todos os div's, vai funcionar bem:

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

Respostas:

90

Você precisa definir a altura da linha.

<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
fonte
32
se você definir line-heightcom o mesmo valor para todos os elementos, o vertical-alignserá inútil. ( jsfiddle.net/VBR5J/448 )
Éderson T. Szlachta
Não funciona para <button>elementos. Em vez de <span>é um <button>.
Verde
15
Esta resposta está errada. o alinhamento vertical pertence ao CONTÊINER (o div) e não aos elementos individuais. A solução correcta - capaz de alinhamento vertical elementos flutuantes - é colocar ambos vertical-aligne line-heightno recipiente: <div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">. REMOVER vertical-align:middle; line-height: 38px;dos estilos de span.
ToolmakerSteve
1
Acabei de descobrir que o que sugiro funciona para os spans flutuantes no violino da resposta, mas não para alguns elementos (falha para uma entrada de rádio flutuante).
Toolmaker Steve
1
@ToolmakerSteve está errado, e esta resposta está errada. O alinhamento vertical só se aplica a elementos embutidos, blocos embutidos ou células de tabela (o último é simplesmente estranho). Adicionar um 'float' transforma um elemento em um elemento de bloco. Ainda assim, usar a altura da linha (e ignorar o alinhamento vertical) pode ser uma solução.
commonpike
15

Editado:

A propriedade CSS vertical-align especifica o alinhamento vertical de um elemento inline, inline-block ou table-cell.

Leia este artigo para entender o alinhamento vertical

Ahsan Khurshid
fonte
1
Isso se aplica a inline-blockelementos também.
Rolf
1
Atualizada. Eu senti falta disso. Obrigado por mencionar.
Ahsan Khurshid
4
isso não é uma resposta
Serzhan Akhmetov
Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas somente com link podem se tornar inválidas se a página vinculada mudar. - Da avaliação
Utsav Patel
8

O alinhamento vertical não funciona com elementos flutuantes, de fato. Isso ocorre porque a flutuação retira o elemento do fluxo normal do documento. Você pode querer usar outras técnicas de alinhamento vertical, como as baseadas em transform, display: table, posicionamento absoluto, line-height, js (último recurso talvez) ou mesmo a velha tabela html simples (talvez a primeira escolha se o conteúdo for realmente tabular). Você verá que há um debate acalorado sobre esse assunto.

No entanto, é assim que você pode alinhar verticalmente SEUS 3 divs:

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

Não sei por que você precisava de largura fixa, display: bloco embutido e flutuante.

Gabriel
fonte
Você poderia adicionar algum código à sua resposta para mostrar como chegar à solução?
abarisone
Além disso, a "resposta correta" é tão fácil de quebrar ... me faz pensar como na Terra 19 pessoas votaram nela.
Gabriel,
3
a pergunta dizia "ele precisa do flutuador: bem no último elemento", então ele pode precisar que o último elemento esteja do lado direito do contêiner. como atingir esse objetivo em sua resposta?
fly.x
Boa resposta, e além disso tão clara! Falta apenas a opção Flexbox.
Luillyfe