Pregunta ¿Cómo alineo verticalmente el texto en un div?


Estoy tratando de encontrar la forma más efectiva de alinear texto con un div. He intentado algunas cosas y ninguna parece funcionar.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


856
2018-05-30 19:02


origen


Respuestas:


Centrado vertical en CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Resumen del artículo:

Para el navegador CSS2 uno puede usar display:table/display:table-cell centrar el contenido

Muestra también disponible en JSFiddle:

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Es posible fusionar hacks para navegador antiguo (IE6 / 7) en estilos con el uso # para ocultar estilos de los navegadores más nuevos:

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>


627
2018-05-30 19:29



Necesita agregar el line-height atributo y ese atributo debe coincidir con la altura de la div. En tu caso:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

De hecho, probablemente puedas eliminar el height atributo por completo.

Esto solo funciona para una línea de texto sin embargo, ten cuidado.


608
2018-02-06 19:21



Actualización - Aquí hay un gran recurso

http://howtocenterincss.com/

Centrar en CSS es un dolor en el culo. Parece haber muchísimas maneras de hacerlo, dependiendo de una variedad de factores. Esto los consolida y le proporciona el código que necesita para cada situación.

Actualización - Uso de Flexbox

En línea con la actualización de esta publicación con la última tecnología, esta es una forma mucho más sencilla de centrar algo utilizando flexbox. Flexbox no es compatible con IE9 and lower.

Aquí hay algunos recursos geniales:

jsfiddle con los prefijos del navegador

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Actualización - Otra solución

Esto es de zerosixthree y te permite centrar cualquier cosa con 6 líneas de css

Este método no es compatible con IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Respuesta anterior

El enfoque simple y cruzado del navegador, útil como enlaces en la respuesta marcada, está ligeramente desactualizado.

Cómo centrar vertical y horizontalmente el texto en una lista desordenada y un div sin recurrir a las alturas de línea JavaScript o css. No importa la cantidad de texto que tenga, no tendrá que aplicar ninguna clase especial a listas o divs específicos (el código es el mismo para cada uno). Esto funciona en todos los principales navegadores, incluidos IE9, IE8, IE7, IE6, Firefox, Chrome, Opera y Safari. Hay 2 hojas de estilo especiales (1 para IE7 y otra para IE6) para ayudarlas debido a sus limitaciones de CSS que los navegadores modernos no tienen.

Andy Howard - Cómo centrar vertical y horizontalmente el texto en una lista desordenada o div

Editar: Como no me interesaba mucho IE7 / 6 para el último proyecto en el que trabajé, utilicé una versión ligeramente reducida (es decir, eliminé las cosas que funcionaban en IE7 y 6). Puede ser útil para otra persona ...

jsfiddle

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

Y el CSS:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

352
2017-11-22 15:18



Es fácil con display: flex. Con el siguiente método, el texto en el div se centrará vertical:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Y si quieres, horizontal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Debes ver la versión del navegador que necesitas; en versiones antiguas, el código no funciona.


119
2017-12-12 20:25



Utilizo lo siguiente para centrar verticalmente elementos aleatorios fácilmente:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Esto centra el texto en mi div a la mitad vertical exacta de un exterior de 200 px de altura div. Tenga en cuenta que es posible que necesite usar un prefijo de navegador (como -webkit- en mi caso) para hacer que esto funcione para su navegador.

Esto funciona no solo para texto, sino también para otros elementos.


104
2018-01-24 14:11



Puede hacer esto configurando la pantalla a 'table-cell' y aplicando vertical-align: middle;

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

Sin embargo, esto no es compatible con todas las versiones de Internet Explorer según este extracto copiado de http://www.w3schools.com/cssref/pr_class_display.asp sin permiso.

Nota: Los valores "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" "y" inherit "no son compatibles con IE7 y versiones anteriores. IE8 requiere un! DOCTYPE. IE9 es compatible con los valores.

La siguiente tabla muestra los valores de visualización permitidos también desde http://www.w3schools.com/cssref/pr_class_display.asp. Espero que esto ayude

enter image description here


35
2018-04-18 15:15



Esta es mi solución favorita para este problema (simple y muy bien compatible con el navegador):

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   


17
2017-09-15 17:54