html - imagen - centrar texto horizontalmente y vertical css

¿Cómo puedo alinear verticalmente el texto en un div?

Question

Estoy tratando de encontrar la manera más efectiva de alinear el 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>

Answer 1

Actualización - Aquí hay un gran recurso

http://howtocenterincss.com/

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

Actualización - Uso de Flexbox

En línea con mantener esta publicación actualizada con la última tecnología, aquí hay una manera mucho más fácil de centrar algo usando flexbox. Flexbox no es compatible con IE9 and lower .

Aquí hay algunos grandes recursos:

• Una guía para flexbox.
• Elementos de centrado con flexbox
• Sintaxis de IE10 para flexbox
• Soporte para Flexbox

jsfiddle con prefijos de 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

Enfoque simple y cruzado, útil ya que los enlaces en la respuesta marcada están ligeramente desactualizados.

Cómo centrar vertical y horizontalmente el texto tanto en una lista desordenada como en un div sin recurrir a JavaScript o css line alturas . No importa cuánto texto 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 navegadores principales, incluidos IE9, IE8, IE7, IE6, Firefox, Chrome, Opera y Safari. Hay 2 hojas de estilo especiales (1 para IE7 y otra para IE6) para ayudarles a entender las limitaciones de css que los navegadores modernos no tienen.

Andy Howard: cómo centrar vertical y horizontalmente el texto en una lista o div ordenada

Edición: Como no me importó mucho IE7 / 6 para el último proyecto en el que trabajé, usé una versión ligeramente simplificada (es decir, eliminé las cosas que lo hicieron funcionar en IE7 y 6). Podría ser útil para alguien más ...

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;
}

Answer 2

Aquí hay una solución que funciona mejor para una sola línea de texto.

También puede funcionar para texto multilineado con algunos ajustes si se conoce el número de líneas

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

Aquí hay un JSFiddle

Answer 3

CSS:

.vertical {
   display: table-caption;
}

Agregue esta clase al elemento que contiene las cosas que desea alinear verticalmente

Answer 4

Compruebe esta solución simple:

HTML

<div class="block-title"><h3>I''m a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

Answer 5

De acuerdo con la respuesta de Adam Tomat, se preparó un example jsfiddle para alinear el texto en div.

<div class="cells-block">    
    text<br/>in the block   
</div>

por pantalla de uso : flex en CSS

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text''s lines */
}

Con otro example y pocas explicaciones en el blog .

Answer 6

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

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

De hecho, probablemente podrías eliminar el atributo de height completo.

Sin embargo, esto solo funciona para una línea de texto , así que ten cuidado.

Answer 7

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

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.

Answer 8

Esta es la solución más limpia que he encontrado (IE9 +) y agrega una solución para el problema "off by .5 pixel" mediante el uso transform-style que otras respuestas habían omitido.

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

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

Fuente: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 9

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">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

-EDITAR-

En estos días (no necesitamos IE6-7-8 más) solo usaría css display: tabla para este problema

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
   

Answer 10

Esta es otra variación de la div en un patrón div usando calc() en CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Esto funciona, porque:

• position:absolute para la colocación precisa del div dentro de un div
• conocemos la altura de la div interna porque la configuramos en 20px .
• calc(50% - 10px) para 50% - la mitad de la altura para centrar el div interior

Answer 11

Funciona bien

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

HABLAR CON DESCARO A

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Sin y con etiqueta de imagen <mat-icon> (que es una fuente)

Answer 12

Hay varios trucos para mostrar contenido / imagen en el centro de Div. Algunas respuestas son realmente buenas y estoy totalmente de acuerdo con estas también.

Absoluto Centrado Horizontal Y Vertical En CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Hay más de 10 técnicas con ejemplos . Ahora depende de ti lo que prefieras.

Sin duda, display:table; display:table-Cell display:table; display:table-Cell es un mejor truco.

Algunos buenos trucos son los siguientes:

Truco 1 - Utilizando display:table; display:table-cell display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT 
    </div>
  </div>
</div>

Código CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Truco 2 - Usando display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT 
  </div>
</div>

Código CSS

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '''';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

Truco 3 - Utilizando position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

Answer 13

Hay una forma más sencilla de alinear verticalmente el contenido sin tener que recurrir a table / table-cell:

http://jsfiddle.net/bBW5w/1/

En él, he agregado un div invisible (ancho = 0) que asume toda la altura del contenedor.

Parece que funciona en IE y FF (últimas versiones), no se verificó con otros navegadores

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

Y por supuesto el CSS:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

Answer 14

Hmm, obviamente hay muchas maneras de resolver esto.

Pero tengo un <div> que está posicionado absolutamente, height:100% (en realidad, top:0;bottom:0 y ancho fijo) y display:table-cell simplemente no funcionó para centrar el texto verticalmente. Mi solución requería un elemento de intervalo interno, pero veo que muchas de las otras soluciones también lo hacen, así que también podría agregarlo:

Mi contenedor es un .label y quiero que el número esté centrado verticalmente en él. Lo hice colocando absolutamente top:50% y ajustando line-height:0

<div class="label"><span>1.</span></div>

Y el CSS es el siguiente:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Véalo en acción: http://jsfiddle.net/jcward/7gMLx/

Answer 15

Intenta incrustar un elemento de tabla.

<div>
    <table style=''width:200px; height:100px;''>
        <td style=''vertical-align:middle;''>
            copenhagen
        </td>
    </table>
</div>

Answer 16

Ni una sola respuesta me ayudó, intente esto, agregue en div de padres:

display:flex;
align-items:center;

Answer 17

Puede alinear el texto central verticalmente dentro de un div mediante el flexbox.

<div>
   <p class="testimonialText"> This is the testimonial text. </p>
</div>

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

Puede obtener más información al respecto en este enlace: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 18

Puede hacer esto configurando la pantalla en ''table-cell'' y aplicando una alineación vertical: middle;

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

Sin embargo, esto no es compatible con todas las versiones de Internet Explorer de acuerdo con este extracto que copié 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 -Grupo "y" heredar "no son compatibles con IE7 y versiones anteriores. IE8 requiere un! DOCTYPE. IE9 soporta los valores.

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

Answer 19

Si necesita usar con la propiedad min-height , debe agregar este CSS en:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Answer 20

Solución simple a un elemento de desconocimiento de valores.

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Answer 21

Tan simple como esto, desde la documentación :

La propiedad CSS de alineación vertical especifica la alineación vertical de un cuadro en línea o de celda de tabla.

#HTML
<div>
  <span>Text</span>
</div>

#CSS
span {
  vertical-align: middle;
}

Answer 22

Usando css grid lo hice por mi.

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class=''outer''>
  <div class=''inner''>
    Content
  </div>
</div>

Answer 23

Uso 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 al centro vertical exacto de un div externo de 200px-high. Tenga en cuenta que es posible que necesite usar un prefijo de navegador (como -webkit- en mi caso) para que esto funcione para su navegador.

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

Answer 24

Utilizando flex ten cuidado con las diferencias en la renderización de los navegadores.

Esto funciona bien tanto para Chrome como para IE:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Compare con el que funciona solo con Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style="    margin: auto;">Active Tasks</span></div>
</div>

Answer 25

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

Resumen del artículo:

Para el navegador CSS2 se puede usar display:table / display:table-cell para 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 combinar hacks para el navegador antiguo (IE6 / 7) en estilos usando # para ocultar los 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>

Answer 26

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

Answer 27

  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

    <div class="container">
            <h1>vertical align text</h1>
    </div>

Con este truco, puedes alinear cualquier cosa si no quieres centrarlo, agrega "left: 0" para alinear a la izquierda.

Answer 28

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>