imagen - centrar texto verticalmente html




¿Cómo centro verticalmente el texto con CSS? (20)

Tengo un elemento div que contiene texto, y quiero alinear el contenido de este div verticalmente en el centro.

Aquí está mi estilo div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

¿Cuál es la mejor manera de hacer esto?


Ajústelo dentro del button lugar de div si no le importa su pequeño efecto 3D visual.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


De otra manera:

No establezca el atributo de height del div , sino que utilice padding: para lograr el efecto. De forma similar a la altura de línea, solo funciona si tiene una línea de texto. Aunque de esta manera, si tiene más contenido, el texto seguirá centrado, pero el div en sí será un poco más grande.

Así que en lugar de ir con

div {
  height:120px;
  line-height: 120px;
}

Puedes decir:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

Esto establecerá el padding superior e inferior del div a 60px , y el padding izquierdo y derecho a cero, haciendo que el div 120px (más la altura de su fuente) sea alto, y colocando el texto centrado verticalmente en el div.


El siguiente código colocará el div en el centro de la pantalla, independientemente del tamaño de la pantalla o del tamaño de div :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Ver más detalles sobre flex here .


Flexboxes que fueron introducidos en CSS3 son la solución:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Nota : Reemplace la línea que está marcada como importante por una de estas líneas, si desea centrar el texto:

1) Sólo verticalmente:

margin: auto 0;

2) Solo horizontalmente:

margin: 0 auto;

ACTUALIZACIÓN : Como noté, este truco también funciona con cuadrículas (pantalla: cuadrícula).


La forma simple y versátil es (como el enfoque de mesa de michielvoo):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

El uso de este atributo (o una clase equivalente) en una etiqueta principal funciona incluso para que muchos niños se alineen:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

La solución aceptada como la respuesta es perfecta para usar line-height igual a la altura de div, pero esta solución no funciona perfectamente cuando el texto está ajustado O está en dos líneas.

Pruebe este si el texto está envuelto o está en varias líneas dentro de un div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Para más referencia, ver:


Necesitaba una fila de elefantes en los que se podía hacer clic, centrados verticalmente, pero sin usar una tabla para sortear algunas rarezas de Internet Explorer 9.

Finalmente encontré el mejor CSS (para mis necesidades) y es genial con Firefox, Chrome e Internet Explorer 11. Lamentablemente, Internet Explorer 9 todavía se está riendo de mí ...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Obviamente, no necesitas los bordes, pero pueden ayudarte a ver cómo funciona.


No estoy seguro de que alguien haya optado por el writing-mode , pero creo que resuelve el problema de manera limpia y tiene un amplio soporte :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Esto, por supuesto, funcionará con cualquier dimensión que necesite (además del 100% de la matriz). Si elimina el comentario de las líneas de borde, será útil familiarizarse.

Demostración de JSFiddle para que juegues .

Soporte de Caniuse : 85.22% + 6.26% = 91.48% (¡incluso IE está en!)


Para referencia y para agregar una respuesta más simple:

CSS puro:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

O como una mezcla SASS / SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Usar por:

.class-to-center {
    @include vertical-align;
}

Por la publicación del blog de Sebastian Ekström, Vertical alinee cualquier cosa con solo 3 líneas de CSS :

Este método puede hacer que los elementos estén borrosos debido a que el elemento se coloca en un "medio píxel". Una solución para esto es establecer su elemento padre en preserve-3d. Como siguiendo

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Vivimos en 2015+ y Flex Box es compatible con todos los principales navegadores modernos.

Será la forma en que los sitios web están hechos de aquí en adelante.

¡Aprenderlo!


Para una sola línea de texto (o un solo carácter) puede utilizar esta técnica:

Se puede usar cuando #box tiene una altura relativa no fija en% .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Vea la demostración en vivo en JsBin (más fácil de editar CSS) o JsFiddle (más fácil de cambiar la altura del marco de resultados).

Si desea colocar texto interno en HTML, no en CSS, entonces necesita ajustar el contenido del texto en un elemento en línea adicional y editar #box::after para que coincida. (Y, por supuesto, content: propiedad debe ser eliminada.)
Por ejemplo,
<div id="box"><span>TextContent</span></div>
En este caso, #box::after debe reemplazarse por #box span .

Para el soporte de IE8 debes reemplazar :: con :


Pruebe esta solución :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Construido utilizando CSS + .


Pruebe la propiedad de transformación:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


Puede utilizar el siguiente fragmento de código como referencia. Está funcionando como un encanto para mí:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

La salida del fragmento de código anterior es la siguiente:

Crédito del código fuente: codepuran.com/web-designing/… codepuran.com/web-designing/…


Puedes probar este enfoque básico:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Sin embargo, solo funciona para una sola línea de texto, porque configuramos la altura de la línea a la misma altura que el elemento de cuadro que contiene.

Un enfoque más versátil.

Esta es otra forma de alinear el texto verticalmente. Esta solución funcionará para una sola línea y varias líneas de texto, pero aún requiere un contenedor de altura fija:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

El CSS solo dimensiona el <div> , verticalmente el centro alinea el <span> al establecer la altura de la línea del <div> igual a su altura, y hace del <span> un bloque en línea con vertical-align: middle . Luego establece la altura de la línea en normal para el <span> , por lo que su contenido fluirá naturalmente dentro del bloque.

Simulación de visualización de tabla

Y aquí hay otra opción, que puede no funcionar en los navegadores más antiguos que no admiten display: table y display: table-cell (básicamente solo Internet Explorer 7). Usando CSS simulamos el comportamiento de las tablas (ya que las tablas admiten la alineación vertical), y el HTML es el mismo que el segundo ejemplo:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Utilizando posicionamiento absoluto

Esta técnica utiliza un elemento de posición absolutamente superior, inferior, izquierda y derecha a 0. Se describe con más detalle en un artículo en Smashing Magazine, Absolute Horizontal And Vertical Centering in CSS .


También puede utilizar las siguientes propiedades.

display: flex; 
align-content: center; 
justify-content : center;

Todo el crédito es para el propietario de este enlace @Sebastian Ekström Link ; por favor, pasa por esto codepen en acción codepen . Al leer el artículo anterior también creé un violín de demostración .

Con solo tres líneas de CSS (excluyendo los prefijos de los proveedores) podemos hacerlo con la ayuda de una transformación: la traducción se centra verticalmente en lo que queramos, incluso si no sabemos su altura.

La transformación de la propiedad CSS se usa generalmente para rotar y escalar elementos, pero con su función de traslación, ahora podemos alinear elementos verticalmente. Por lo general, esto se debe hacer con posicionamiento absoluto o ajuste de alturas de línea, pero esto requiere que usted conozca la altura del elemento o que solo trabaje en texto de una sola línea, etc.

Entonces, para hacer esto escribimos:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Eso es todo lo que necesitas. Es una técnica similar al método de posición absoluta, pero con la ventaja de que no tenemos que establecer ninguna altura en el elemento o posición-propiedad en el padre. ¡Funciona directamente, incluso en Internet Explorer 9 !

Para hacerlo aún más simple, podemos escribirlo como una mezcla con los prefijos de sus proveedores.


Vi las respuestas anteriores, y funcionarán solo para ese ancho de pantalla (no responde). Para el responsive tienes que usar flex.

Ejemplo:

div{ display:flex; align-item:center;}

Enfoque flexible

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


Posicionamiento absoluto y estiramiento

Al igual que con el método anterior, éste comienza estableciendo la posición en los elementos padre e hijo como relativo y absoluto, respectivamente. A partir de ahí las cosas difieren.

En el código a continuación, una vez más he usado este método para centrar al niño tanto horizontal como verticalmente, aunque solo se puede usar el método para centrar verticalmente.

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

La idea con este método es intentar que el elemento secundario se extienda a los 4 bordes estableciendo los valores superior, inferior, derecho e izquierdo a 0. Debido a que nuestro elemento secundario es más pequeño que nuestros elementos principales, no puede alcanzar todos 4 aristas.

Al establecer auto como el margen en los 4 lados, sin embargo, los márgenes opuestos son iguales y muestra nuestro div hijo en el centro del div padre.

Desafortunadamente, lo anterior no funcionará en IE7 y más adelante, y al igual que en el método anterior, el contenido dentro del div niño puede crecer demasiado y hacer que se oculte.


.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>







vertical-alignment