html - texto - Alineación vertical de elementos en un div.

centrar texto horizontalmente css

Question

Tengo un div con dos imágenes y un h1 . Todos ellos deben estar alineados verticalmente dentro de la div, uno al lado del otro.

Una de las imágenes debe estar posicionada de forma absolute dentro de la div.

¿Qué es el CSS necesario para que esto funcione en todos los navegadores comunes?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Answer 1

Todos ellos deben estar alineados verticalmente dentro del div

Alineado como ? ¿Tapas de las imágenes alineadas con la parte superior del texto?

Una de las imágenes debe estar posicionada de forma absoluta dentro de la div.

¿Absolutamente posicionado en relación con el DIV? Tal vez podrías esbozar lo que estás buscando ...?

fd ha descrito los pasos para el posicionamiento absoluto, así como el ajuste de la visualización del elemento H1 para que las imágenes aparezcan alineadas con él. A eso, agregaré que puede alinear las imágenes usando el estilo de vertical-align :

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... esto pondría el encabezado y las imágenes juntas, con los bordes superiores alineados. Existen otras opciones de alineación; Consulte la documentación . También puede resultar beneficioso dejar caer el DIV y mover las imágenes dentro del elemento H1 ; esto proporciona un valor semántico al contenedor y elimina la necesidad de ajustar la visualización del H1 :

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Answer 2

Actualizado - Bootstrap-4

Centrar los elementos secundarios verticalmente y horizontalmente.

para vertical: d-flex align-items-center

para horizontal: d-flex justify-content-center

.width-height {
    height: 180px;width:100%"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info width-height">
  <div class="bg-light p-2">I am in Center</div>
</div>

Para más información, consulte la documentación getbootstrap.com/docs/4.0/utilities/flex/ , hay varios métodos para centrar los elementos.

Answer 3

¡Solo usa una tabla de una celda dentro del div! Solo configure la altura de la celda y la tabla y con el 100% y podrá usar la alineación vertical.

Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores a la Edad de Piedra.

Answer 4

Ahora que el soporte de flexbox está aumentando, este CSS aplicado al elemento contenedor centraría verticalmente el elemento contenido:

.container {        
    display: flex;
    align-items: center;
}

Use la versión con prefijo si también necesita apuntar a Explorer 10 y los navegadores de Android antiguos (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Answer 5

Al utilizar CSS para centrar verticalmente, puede dejar que los contenedores externos actúen como una tabla y el contenido como una celda de tabla. En este formato tus objetos se mantendrán centrados. :)

Anidé varios objetos en JSFiddle para un ejemplo, pero la idea central es así:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

El ejemplo de múltiples objetos:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Resultado

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Answer 6

Aquí hay otro enfoque (sensible):

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Answer 7

Casi todos los métodos necesitan especificar la altura, pero a menudo no tenemos alturas.
Así que aquí hay un truco de 3 líneas de CSS3 que no requiere conocer la altura.

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

Es compatible incluso en IE9.

con sus prefijos de vendedor:

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

Esta es mi solución personal para un elemento i dentro de un div

Ejemplo de JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Answer 9

Funcionó para mí:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Answer 10

Mi truco es colocar dentro de la tabla div una tabla con 1 fila y 1 columna, establecer el 100% del ancho y la altura, y la propiedad vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

Answer 11

Para colocar los elementos del bloque en el centro (funciona en IE9 y superior), necesita un div envoltura:

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

Answer 12

Para mí, funcionó de esta manera:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

El elemento "a" se convirtió en un botón, usando clases Bootstrap, y ahora está centrado verticalmente dentro de un "div" externo.

Answer 13

Podemos usar un cálculo de función CSS para calcular el tamaño del elemento y luego colocar el elemento secundario en consecuencia.

Ejemplo HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Y CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px ''source code pro'', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo creado aquí: https://jsfiddle.net/xnjq1t22/

Esta solución funciona bien con la height y el width respuesta div también.

Nota: La función de cálculo no está probada para compatibilidad con navegadores antiguos.

Answer 14

Por defecto, h1 es un elemento de bloque y se representará en la línea después del primer img, y hará que el segundo img aparezca en la línea que sigue al bloque.

Para evitar que esto ocurra, puede configurar el h1 para que tenga un comportamiento de flujo en línea:

#header > h1 { display: inline; }

En cuanto a posicionar absolutamente el img dentro del div , es necesario configurar el div que contiene para que tenga un "tamaño conocido" antes de que esto funcione correctamente. En mi experiencia, también necesita cambiar el atributo de posición fuera de la posición predeterminada: position: relative funciona para mí:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Si puede lograr que funcione, puede intentar eliminar progresivamente los atributos de altura, ancho y posición del encabezado div para obtener los atributos mínimos necesarios para obtener el efecto que desea.

ACTUALIZAR:

Aquí hay un ejemplo completo que funciona en Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Answer 15

Sólo esta:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores a la Edad de Piedra.

Answer 16

Según hoy, he encontrado una nueva solución para alinear verticalmente varias líneas de texto en un div mediante CSS3 (y también estoy usando el sistema de cuadrícula bootstrap v3 para embellecer la interfaz de usuario), que es la siguiente:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Según mi entendimiento, el padre inmediato del texto que contiene el elemento debe tener cierta altura. Espero que te ayude también. ¡Gracias!

Answer 17

Soy un tipo .NET que acaba de entrar en la programación web. No usé CSS (bueno, un poco). Utilicé un poco de JavaScript para realizar el centrado vertical junto con la función .css de jQuery.

Solo estoy publicando todo desde mi prueba. Probablemente no sea demasiado elegante, pero funciona hasta ahora.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + ''px'';
                var newPct = newTop / parentHeight+''%;'';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically(''#buttonRight'');
                centerElementVertically(''#buttonLeft'');
                centerElementVertically(''#testerbtn'')
            });

            $(window).resize(()=>{
                centerElementVertically(''#buttonRight'');
                centerElementVertically(''#buttonLeft'');
                centerElementVertically(''#testerbtn'')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

Answer 18

Una técnica de un amigo mío:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I''m vertically centered.</p>
</div>

CSS:

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

DEMO aquí

Answer 19

Usa esta fórmula, y funcionará siempre sin grietas:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Answer 20

Utilicé este código muy simple:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Obviamente, si usas un .class o un #id , el resultado no cambiará.

Answer 21

Wow, este problema es popular. Se basa en un malentendido en la propiedad vertical-align . Este excelente artículo lo explica:

Entendiendo vertical-align , o "Cómo (no) centrar verticalmente el contenido" por Gavin Kistner.

"Cómo centrarse en CSS" es una gran herramienta web que ayuda a encontrar los atributos de centrado de CSS necesarios para diferentes situaciones.

En pocas palabras _{^{(y para evitar la podredumbre del enlace)}} :

• Los elementos en línea (y solo los elementos en línea) se pueden alinear verticalmente en su contexto a través de vertical-align: middle . Sin embargo, el "contexto" no es la altura del contenedor principal, es la altura de la línea de texto en la que se encuentran. Ejemplo de jsfiddle
• Para los elementos de bloque, la alineación vertical es más difícil y depende en gran medida de la situación específica:
  • Si el elemento interno puede tener una altura fija , puede hacer que su posición sea absolute y especificar su height , margin-top y posición top . ejemplo de jsfiddle
  • Si el elemento centrado consta de una sola línea y su altura principal está fija , simplemente puede configurar la line-height la line-height del contenedor para completar su altura. Este método es bastante versátil en mi experiencia. ejemplo de jsfiddle
  • ... hay más casos especiales de este tipo.

Answer 22

He estado usando la siguiente solución (sin posicionamiento ni altura de línea) desde hace más de un año, también funciona con IE 7 y 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Answer 23

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Answer 24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Answer 25

<div id="header" style="display: table-cell; vertical-align:middle;">

...

o CSS

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

Cobertura del navegador