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


144

¿Cómo consigo 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>

Respuestas:


218

Usar en line-height:50px;lugar de altura. Eso debería hacer el truco ;)


1
Excelente! Funciona para cualquier tipo de etiqueta. En mi caso, trabajé para <img>.
Felipe Conde

21
El problema es cuando el texto se ajusta. Con dos líneas, este tramo se representará con una altura de 100 px.
Norberto Yoan

si su texto se ajusta, intente mi respuesta @NorbertoYoan
Hashbrown

lo mismo para @Sumit (duplicado debido a un problema con los comentarios de SO )
Hashbrown

Esta no debería ser la respuesta más votada, tiene la solución que podría dar otros resultados no deseados dependiendo del contenido.
rafaelmorais

113

Tenga en cuenta que el line-heightenfoque falla si tiene una oración larga en la spanque 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 atasqué cuando quería mostrar una imagen con texto centrado verticalmente en su lado derecho que funciona en una aplicación web receptiva. Como base utilizo el enfoque sugerido por Eric Nickus y Felipe Tadeo.

Si quieres lograr:

escritorio

y esto:

móvil

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


¿Qué es una altura dinámica?
Alberto Acuña

39

Esta es la forma más sencilla de hacerlo si necesita varias líneas. Envuelva spanel texto en otro spany especifique su altura con line-height. El truco para múltiples líneas está restableciendo los interiores span's line-height.

<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*/
}

MANIFESTACIÓN

Por supuesto, el exterior spanpodría ser un divo qué


2
spans, como cualquier otro elemento en línea, puede contener cualquier elemento en línea HTML . De todos modos, escribí que textvalignmiddlepuede ser un divcaso si es necesario (y puedes configurarlo display:inline;si eres tan reacio a usarlo spans)
Hashbrown

Quiero decir que no deberían haberlo hecho. Son para contener texto. De lo contrario, use un div.
JorgeeFG

3
spanes el contenedor genérico en línea para html y no da pistas de ser solo texto; `Se puede usar para agrupar elementos con fines de estilo ...`. Sugiero leer la especificación antes de aplicar sus estándares de codificación personal a otros
declarándolos

3
De cualquier manera, esta línea de conversación no es constructiva en un sentido técnico a la pregunta y no es para qué son los comentarios en SO
Hashbrown

A mí también me funciona. Usó un elemento diferente al span.
chocolata

27

La forma flexbox:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

dado .fooque un lapso display: flex-inlineencajaría mejor
koala

77
¿Quiso decir "inline-flex"?
Tim Gerhard el

5

Necesitaba esto para los enlaces, así que envolví el lapso con una etiqueta a y un div, luego centré la etiqueta del tramo en 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%;
}

Gracias por esto, odio jugar con CSS, estuve todo el día tratando de centrar verticalmente un elemento cuando encontré tu respuesta aquí. Eres un salvavidas!
Todd Nestor

5

Imagen y texto de centro vertical CSS

Tengo Create one demo for vertical image center and text también tengo prueba en firefox, chrome, safari, internet explorer 9 y 8 también.

Es muy corto y fácil css y html, verifique el código a continuación y puede encontrar la salida en screenhort.

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


2

esto funciona para mí (Keltex dijo lo mismo)

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

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

1

El atributo css de alineación vertical no hace lo que espera desafortunadamente. Este artículo explica 2 formas de alinear verticalmente un elemento usando css.


1

Establezca padding-top como un valor apropiado para empujar la x hacia abajo, luego reste el valor que tiene para padding-top de la altura.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.