¿Cómo alinear verticalmente elementos en un div?
https://stackoverflow.com/questions/79461
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un div con dos imágenes y un h1.Todos ellos deben estar alineados verticalmente dentro del div, uno al lado del otro.
Una de las imágenes debe ser absolute colocado dentro del div.
¿Cuál 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>
Solución
Vaya, este problema es popular.Se basa en un malentendido en el vertical-align propiedad.Este excelente artículo lo explica:
Comprensión vertical-align, o "Cómo (no) centrar el contenido verticalmente" por Gavin Kistner.
“Cómo centrar en CSS” es una gran herramienta web que ayuda a encontrar los atributos de centrado de CSS necesarios para diferentes situaciones.
En una palabra (y para evitar que el enlace se pudra):
- Elementos en línea (y solo elementos en línea) se pueden alinear verticalmente en su contexto mediante
vertical-align: middle.Sin embargo, el "contexto" no es la altura total del contenedor principal, es la altura de la línea de texto en la que se encuentra. 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 interior puede tener un altura fija, puedes hacer su posición
absolutey especificar suheight,margin-topytopposición. ejemplo de jsfiddle - Si el elemento centrado consta de una sola línea y su altura principal es fija simplemente puede configurar el contenedor
line-heightpara llenar su altura.Este método es bastante versátil en mi experiencia. ejemplo de jsfiddle - … hay más casos especiales de este tipo.
- Si el elemento interior puede tener un altura fija, puedes hacer su posición
Otros consejos
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;
}
Utilice la versión con prefijo si también necesita apuntar a Explorer 10 y navegadores 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;
}
Usé 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, ya sea que uses un .class o un #id, el resultado no cambiará.
Funcionó para mí:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
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;}
MANIFESTACIÓN aquí
Todos ellos deben estar alineados verticalmente dentro del div.
Alineado cómo?¿Partes superiores de las imágenes alineadas con la parte superior del texto?
Una de las imágenes debe estar en una posición absoluta dentro del div.
¿Absolutamente posicionado en relación con el DIV?¿Quizás podrías esbozar lo que estás buscando...?
fd ha descrito los pasos para el posicionamiento absoluto, así como ajustar la visualización del H1 elemento de tal manera que las imágenes aparecerán en línea con él.A eso, agregaré que puedes alinear las imágenes usando el vertical-align estilo:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...esto juntaría el encabezado y las imágenes, con los bordes superiores alineados.Existen otras opciones de alineación; ver la documentación.También puede resultarle beneficioso soltar el DIV y mover las imágenes dentro del H1 elemento: esto proporciona 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>
Para colocar elementos de bloque en el centro (funciona en IE9 y superiores), se necesita un contenedor div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Utilice 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>Casi todos los métodos necesitan especificar la altura, pero a menudo no tenemos ninguna altura.
Así que aquí hay un truco de 3 líneas CSS3 que no requiere conocer la altura.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Es compatible incluso con IE9.
con sus prefijos de proveedor:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Fuente: http://zerosixtres.se/vertical-align-anything-with-just-3-lines-of-css/
Mi truco consiste en poner dentro del div una tabla con 1 fila y 1 columna, establecer el 100% del ancho y alto, 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>
Por defecto, h1 es un elemento de bloque y se representará en la línea después de la primera imagen, y hará que la segunda imagen aparezca en la línea que sigue al bloque.
Para evitar que esto ocurra, puede configurar 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, debe configurar el div contenedor para que tenga un "tamaño conocido" antes de que esto funcione correctamente.En mi experiencia, también es necesario cambiar el atributo de posición del valor predeterminado: posición:relativo funciona para mí:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Si puede hacer que eso funcione, puede intentar eliminar progresivamente los atributos de alto, ancho y posición de div.header 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>
Usando CSS para el centro vertical, puede dejar que los contenedores externos actúen como una tabla y el contenido como una celda de la tabla.En este formato tus objetos permanecerán centrados.:)
Anidé varios objetos en JSFiddle por ejemplo, pero la idea central es la siguiente:
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
Podemos usar un cálculo de función CSS para calcular el tamaño del elemento y luego colocar el elemento secundario en consecuencia.
HTML de ejemplo:
<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;
}
Demostración creada aquí: https://jsfiddle.net/xnjq1t22/
Esta solución funciona bien con responsive div height y width también.
Nota:No se ha probado la compatibilidad de la función calc con navegadores antiguos.
Hasta el día de hoy, encontré una nueva solución para alinear verticalmente múltiples líneas de texto en un div usando 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 tengo entendido, el elemento primario inmediato del texto que contiene el elemento debe tener cierta altura.Espero que te ayude a ti también.¡Gracias!
Hay dos formas de alinear elementos vertical y horizontalmente.
1.Arranque 4.3.X
para alineación vertical: d-flex align-items-center
para alineación horizontal: d-flex justify-content-center
.container {
height: 180px;
width:100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center bg-info container">
<div class="bg-light p-2">I am in Center</div>
</div>2.CSS3
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}<div class="container">
<div class="child">I am in Center</div>
</div>¡Simplemente use una tabla de una celda dentro del div!Simplemente configure la altura de la celda y la tabla al 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 de la Edad de Piedra!
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>
Esta es mi solución personal para un elemento i dentro de un div
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;
}
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.
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
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 de la Edad de Piedra!
<!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>
Aquí hay otro enfoque (reactivo):
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;
}
Soy un tipo de .NET que acaba de iniciarse en la programación web.No usé CSS (bueno, un poco).Utilicé un poco de JavaScript para lograr el centrado vertical junto con la función .css de jQuery.
Solo estoy publicando todo lo de mi prueba.Probablemente no sea demasiado elegante, pero hasta ahora funciona.
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>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
o CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
