Alinhamento vertical CSS de elementos em linha / bloco em linha

142

Eu estou tentando obter vários inlinee inline-blockcomponentes alinhados verticalmente em uma div. Como é que o spanexemplo insiste em ser empurrado para baixo? Eu tentei os dois vertical-align:middle;e vertical-align:top;, mas nada muda.

HTML:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

CSS:

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

RESULTADO:
insira a descrição da imagem aqui

FIDDLE

Yarin
fonte
Note que isso não vai acontecer se <a>elementos contêm algum texto dentro deles veja este link
S.Serpooshan

Respostas:

270

vertical-alignaplica-se aos elementos que estão sendo alinhados, não ao elemento pai. Para alinhar verticalmente os filhos da div, faça o seguinte:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Veja: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTA : vertical-aligné relativo à linha de texto atual, não à altura total do pai div. Se você queria que o pai diva ser mais altos e ainda tem os elementos verticalmente centradas, defina o div's line-heightpropriedade em vez do seu height. Siga o link jsfiddle acima para um exemplo.

Diego
fonte
Isso para de funcionar se você especificar uma altura para o exterior div.
Abhranil Das
4
@AbhranilDas vertical-aligné relativo à linha de texto atual, não ao elemento pai. Para fazer isso funcionar como você deseja, defina as divs em line-heightvez de suas height.
297 Diego
24

vertical-align:top;em a& span. Como isso:

a, span{
 vertical-align:top;
}

Verifique isso http://jsfiddle.net/TFPx8/10/

sandeep
fonte
5

Simplesmente flutuar os dois elementos restantes obtém o mesmo resultado.

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}
HoldTheLine
fonte
O problema de flutuá-los para a esquerda é que eles serão agrupados na próxima linha quando o navegador ficar muito pequeno. Às vezes, você precisa que os itens permaneçam alinhados mesmo além dos limites do navegador e, portanto, inline-blocké a única solução.
21413 Jake Wilson
Embora esse problema de empacotamento possa estar em um problema, eu diria que essa é uma solução realmente boa para os casos em que o empacotamento está correto. É elegante, fala com o espírito do efeito desejado e não requer modificações para os pais.
precisa
1

Para ajustar a posição de um inline-blockitem, use superior e esquerda:

  position: relative;
  top: 5px;
  left: 5px;

Obrigado CSS-Tricks !

kslstn
fonte
translatetambém é possível.
user4642212