css - texto - Cómo centrar verticalmente divs?
centrar texto vertical y horizontal css (16)
¿has probado este?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
espero que esto ayude
Estoy tratando de crear un pequeño cuadro de entrada de nombre de usuario y contraseña.
Me gustaría preguntar, ¿cómo alineas verticalmente un div?
Lo que tengo es:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
¿Cómo puedo hacer que el div con ID Username and Form se alinee verticalmente al centro? He intentado poner:
vertical-align: middle;
en CSS para el div con id. Login, pero parece que no funciona. Cualquier ayuda sería apreciada.
Centrar los elementos secundarios en un div. Funciona para todos los tamaños de pantalla
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
<div id="parent">
<div id="child">Content here</div>
</div>
para más detalles, puede visitar este link
El comentario de @GaborNagy en otra publicación fue la solución más simple que pude encontrar y funcionó como un encanto para mí, ya que trajo una jsfiddle. La estoy copiando aquí con una pequeña adición:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
Si también desea alinearlo horizontalmente, debe agregar otra div "inner-cell" dentro del div "cell" y darle este estilo:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
El mejor enfoque en los navegadores modernos es usar flexbox:
#Login {
display: flex;
align-items: center;
}
Algunos navegadores necesitarán prefijos de proveedor. Para navegadores más antiguos sin soporte de flexbox (ej. IE 9 y menor), necesitarás implementar una solución alternativa utilizando uno de los métodos más antiguos .
Lectura recomendada
En mi Firefox y Chrome esto funciona:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
Encontré este sitio útil: http://www.vanseodesign.com/css/vertical-centering/ Esto funcionó para mí:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
Encontré una manera que funciona bien para mí. El siguiente script inserta una imagen invisible (igual que bgcolor o un gif transparente) con una altura igual a la mitad del espacio en blanco de la pantalla. El efecto es una alineación vertical perfecta.
Supongamos que tiene un encabezado div (alto = 100) y un pie de página div (alto = 50) y el contenido en el div principal que le gustaría alinear tiene una altura de 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src=''empty.jpg'' height=''" + imgheight + "''>");
</script>
¡Coloca el script justo antes del contenido que desea alinear!
En mi caso, el contenido que me gustaba alinear era una imagen (ancho = 95%) con una relación de aspecto de 100: 85 (ancho: alto). Lo que significa que la altura de la imagen es 85% de su ancho. Y el ancho es el 95% del ancho de pantalla.
Por lo tanto, utilicé:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combina este script con
<body onResize="window.location.href = window.location.href;">
y tienes una alineación vertical suave.
¡Espero que esto funcione para usted también!
Esto se puede hacer con 3 líneas de CSS y es compatible con (incluyendo) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Ejemplo: http://jsfiddle.net/cas07zq8/
La alineación vertical siempre ha sido difícil.
Aquí he cubierto algún método de alineación vertical de un div.
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
Llego bastante tarde a la fiesta, pero se me ocurrió esto y es uno de mis hacks rápidos preferidos para la alineación vertical. Es completamente simple y fácil de entender lo que está pasando.
Utiliza el atributo :before css para insertar un div en el comienzo del div principal, dale display:inline-block y vertical-align:middle y luego da esas mismas propiedades al div infantil. Dado que vertical-align es para la alineación a lo largo de una línea, los divs en línea se considerarán una línea.
Haga la :before height:100% div height:100% , y el div infantil automáticamente seguirá y se alineará en el medio de una "línea" muy alta.
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Aquí hay un violín para demostrar de lo que estoy hablando. El div infantil puede ser de cualquier altura y nunca tendrá que modificar sus márgenes / rellenos.
Y aquí hay un violín más explicativo .
Si no le gusta :before , siempre puede poner manualmente un div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
Y luego simplemente reasignar .parent:before de .parent .before
Necesitaba especificar la altura mínima
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
Puedes alinear verticalmente un div en otro div. Vea este ejemplo en JSFiddle o considere el ejemplo a continuación.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
El margen de .innerDiv debe estar en este formato: margin: auto *px;
[Donde, * es su valor deseado.]
display: inline-flex es compatible con los últimos navegadores (versión actualizada / actual) con soporte HTML5.
Es posible que no funcione en Internet Explorer: P :)
Intente siempre definir una altura para cualquier div alineado verticalmente (es decir, innerDiv) para contrarrestar problemas de compatibilidad.
Si conoce la altura, puede usar el posicionamiento absoluto con un margin-top negativo margin-top como el siguiente:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
De lo contrario, no hay una manera real de centrar verticalmente un div con solo CSS
los divs no se pueden alinear verticalmente de esa manera; sin embargo, puede usar márgenes o posición: relativa para modificar su ubicación.
si está utilizando una altura de corrección de fragmentación de la que puede usar la cubierta acolchada según su necesidad de diseño. o puedes usar top: 50%. si utilizamos div que vertical, la alineación no funciona, por lo que utilizamos el relleno superior o la posición según las necesidades.
A menos que el div alineado tenga altura fija, intente usar el siguiente CSS para el div alineado:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}