Alineación vertical CSS de elementos en línea/bloque en línea

Estoy intentando alinear varios inlinecomponentes inline-blockverticalmente en un archivo div. ¿Cómo es que spanen este ejemplo insiste en ser empujado hacia abajo? Probé ambos vertical-align:middle;y vertical-align:top;, pero nada cambia.

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 :
ingrese la descripción de la imagen aquí

VIOLÍN

Mar 12 '12 23:03 Yarin

vertical-alignse aplica a los elementos que se alinean, no a su elemento principal. Para alinear verticalmente los hijos del div, haga esto en su lugar:

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

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

NOTA : vertical-alignes relativo a la línea de texto actual, no a la altura completa del padre div. Si desea que el padre divsea más alto y aún tenga los elementos centrados verticalmente, establezca la divpropiedad line-heighten lugar de su height. Siga el enlace jsfiddle anterior para ver un ejemplo.

Mar 12 '2012 16:03 Diego

Cede y . vertical-align:top;_ Como esto:aspan

a, span{
 vertical-align:top;
}

Mira esto http://jsfiddle.net/TFPx8/10/

Mar 12 '2012 16:03 sandeep

Simplemente haciendo flotar ambos elementos hacia la izquierda se logra el mismo 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;
}

Mar 12 '2012 16:03 HoldTheLine

Para ajustar la posición de un inline-blockelemento, utilice arriba e izquierda:

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

¡Gracias CSS-Tricks !

Jan 24 '2020 08:01 kslstn