¿Cómo alineo verticalmente algo dentro de una etiqueta span?

Question

¿Cómo hago para que la "x" se alinee verticalmente en el medio del tramo?

.foo { 
    height: 50px; 
    border: solid black 1px; 
    display: inline-block; 
    vertical-align: middle; 
} 

<span class="foo"> 
    x 
</span> 

Answer 1

El atributo vertical-align css no hace lo que esperas desafortunadamente. This article explica 2 maneras de alinear verticalmente un elemento usando css.

Answer 2

Use line-height:50px; en lugar de la altura. Eso debería ser el truco;)

Answer 3

Establezca que el relleno sea un valor apropiado para empujar la x hacia abajo, luego reste el valor que tiene para la parte superior acolchada desde la altura.

Answer 4

esto funciona para mí (Keltex dijo lo mismo)

.foo { 
height: 50px; 
... 
} 
.foo span{ 
vertical-align: middle; 
} 

<span class="foo"> <span>middle!</span></span> 

Answer 5

Tenga en cuenta que el enfoque line-height falla si usted tiene una larga condena en el span que se rompe la línea porque no hay suficiente espacio. En este caso, tendría dos líneas con un espacio con la altura de los N píxeles especificados en la propiedad.

Me quedé en él cuando quería mostrar una imagen con texto verticalmente centrado en su lado derecho que funciona en una aplicación web sensible. Como base uso el enfoque sugerido por Eric Nickus y Felipe Tadeo.

Si usted quiere lograr:

y esto:

.container { 
 
    background: url("https://i.imgur.com/tAlPtC4.jpg") no-repeat; 
 
    display: inline-block; 
 
    background-size: 40px 40px; /* image's size */ 
 
    height: 40px; /* image's height */ 
 
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */ 
 
} 
 

 
.container span { 
 
    height: 40px; /* image's height */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<span class="container"> 
 
    <span>This is a centered sentence next to an image</span> 
 
</span>

Answer 6

Esta es la forma más sencilla para hacerlo si necesitas varias líneas Envuelva span 'texto en otro span y especifique su altura con line-height. El truco para varias líneas es restablecer el spanline-height interno.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span> 

.textvalignmiddle { 
    line-height: /*set height*/; 
} 

.textvalignmiddle > span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1em; /*set line height back to normal*/ 
} 

DEMO

Por supuesto, el exterior span podría ser una div o whathaveyou.

Answer 7

Necesitaba esto para los enlaces, por lo que envuelve el lapso con una etiqueta a y un div, a continuación, se centró la etiqueta span sí

HTML

<div> 
    <a class="tester" href="#"> 
     <span>Home</span> 
    </a> 
</div> 

CSS

.tester{ 
    display: inline-block; 
    width: 9em; 
    height: 3em; 
    text-align: center; 
} 
.tester>span{ 
    position: relative; 
    top: 25%; 
} 

Answer 8

imagen y texto del centro vertical de CSS

Tengo Crear una demostración para el centro vertical de la imagen y el texto. También tengo una prueba en Firefox, Chrome, Safari, Internet Explorer 9 y 8 también.

Es muy corto y fácil CSS y html, compruebe el código a continuación y puede encontrar resultados en screenshort.

HTML

<div class="frame"> 
    <img src="capabilities_icon1.png" alt="" /> 
</div> 

CSS

.frame { 
     height: 160px;  
     width: 160px; 
     border: 1px solid red; 
     white-space: nowrap; 
     text-align: center; margin: 1em 0; 
    } 

    .frame::before { 
     display: inline-block; 
     height: 100%; 
     vertical-align: middle; 
     content:""; 
    } 

    img { 
     background: #3A6F9A; 
     vertical-align: middle; 
    } 

salida enter image description here