html - imagen - centrar texto verticalmente bootstrap
¿Cómo centro verticalmente el texto con CSS? (30)
Tengo un elemento div que contiene texto, y quiero alinear el contenido de este div verticalmente en el centro.
Aquí está mi estilo div:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
¿Cuál es la mejor manera de hacer esto?
Ajústelo dentro del button lugar de div si no le importa su pequeño efecto 3D visual.
#box
{
height: 120px;
width: 300px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
}
<button Id="box" disabled>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>
De otra manera:
No establezca el atributo de height del div , sino que utilice padding: para lograr el efecto. De forma similar a la altura de línea, solo funciona si tiene una línea de texto. Aunque de esta manera, si tiene más contenido, el texto seguirá centrado, pero el div en sí será un poco más grande.
Así que en lugar de ir con
div {
height:120px;
line-height: 120px;
}
Puedes decir:
div {
padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be exact
}
Esto establecerá el padding superior e inferior del div a 60px , y el padding izquierdo y derecho a cero, haciendo que el div 120px (más la altura de su fuente) sea alto, y colocando el texto centrado verticalmente en el div.
Donde quiera que desee verticalmente, el estilo central significa que puede probar display:table-cell y vertical-align:middle .
Ejemplo:
#box
{
display: table-cell;
vertical-align: middle;
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
El siguiente código colocará el div en el centro de la pantalla, independientemente del tamaño de la pantalla o del tamaño de div :
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<html>
<head>
</head>
<body>
<div class="center-screen">
I''m in the center
</div>
</body>
</html>
Ver más detalles sobre flex here .
Flexboxes que fueron introducidos en CSS3 son la solución:
section {
display: flex;
display: -webkit-flex;
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 3px solid orange;
background-color: gold;
}
p {
margin: auto; /* Important */
text-align: center;
font-family: Calibri;
background-color: yellow;
border-radius: 20px;
padding: 15px;
}
<section>
<p>
I''m centered!<br/>
Flexboxes are great!
</p>
</section>
Nota : Reemplace la línea que está marcada como importante por una de estas líneas, si desea centrar el texto:
1) Sólo verticalmente:
margin: auto 0;
2) Solo horizontalmente:
margin: 0 auto;
ACTUALIZACIÓN : Como noté, este truco también funciona con cuadrículas (pantalla: cuadrícula).
Incluso mejor idea para esto. Tú también puedes hacer esto.
body,
html {
height: 100%;
}
.parent {
white-space: nowrap;
height: 100%;
text-align: center;
}
.parent:after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '''';
}
.centered {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="parent">
<div class="centered">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
La forma simple y versátil es (como el enfoque de mesa de michielvoo):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display:table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
El uso de este atributo (o una clase equivalente) en una etiqueta principal funciona incluso para que muchos niños se alineen:
<parent ctrv> <ch1/> <ch2/> </parent>
La solución aceptada como la respuesta es perfecta para usar line-height igual a la altura de div, pero esta solución no funciona perfectamente cuando el texto está ajustado O está en dos líneas.
Pruebe este si el texto está envuelto o está en varias líneas dentro de un div.
#box
{
display: table-cell;
vertical-align: middle;
}
Para más referencia, ver:
Los navegadores más nuevos ahora soportan la función de calc CSS. Si está apuntando a estos navegadores, puede querer hacer algo como esto:
<div style="position: relative; width: 400px; height: 400px; background-color: red">
<span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
Here are two lines that will be centered even if the parent div changes size.
</span>
</div>
La clave es usar style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" Dentro de un div padre absoluto o relativamente posicionado.
Necesitaba una fila de elefantes en los que se podía hacer clic, centrados verticalmente, pero sin usar una tabla para sortear algunas rarezas de Internet Explorer 9.
Finalmente encontré el mejor CSS (para mis necesidades) y es genial con Firefox, Chrome e Internet Explorer 11. Lamentablemente, Internet Explorer 9 todavía se está riendo de mí ...
div {
border: 1px dotted blue;
display: inline;
line-height: 100px;
height: 100px;
}
span {
border: 1px solid red;
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.out {
border: 3px solid silver;
display: inline-block;
}
<div class="out" onclick="alert(1)">
<div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
<div> <span>A lovely clickable option.</span> </div>
</div>
<div class="out" onclick="alert(2)">
<div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
<div> <span>Something charming to click on.</span> </div>
</div>
Obviamente, no necesitas los bordes, pero pueden ayudarte a ver cómo funciona.
No estoy seguro de que alguien haya optado por el writing-mode , pero creo que resuelve el problema de manera limpia y tiene un amplio soporte :
.vertical {
//border: 1px solid green;
writing-mode: vertical-lr;
text-align: center;
height: 100%;
width: 100%;
}
.horizontal {
//border: 1px solid blue;
display: inline-block;
writing-mode: horizontal-tb;
width: 100%;
text-align: center;
}
.content {
text-align: left;
display: inline-block;
border: 1px solid #e0e0e0;
padding: .5em 1em;
border-radius: 1em;
}
<div class="vertical">
<div class="horizontal">
<div class="content">
I''m centered in the vertical and horizontal thing
</div>
</div>
</div>
Esto, por supuesto, funcionará con cualquier dimensión que necesite (además del 100% de la matriz). Si elimina el comentario de las líneas de borde, será útil familiarizarse.
Demostración de JSFiddle para que juegues .
Soporte de Caniuse : 85.22% + 6.26% = 91.48% (¡incluso IE está en!)
Otra forma (no mencionada aquí todavía) es con Flexbox .
Solo agrega el siguiente código al elemento contenedor :
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
Demostración de Flexbox 1
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>
Alternativamente, en lugar de alinear el contenido a través del contenedor , flexbox también puede centrar el elemento flexible con un margen automático cuando solo hay un elemento flexible en el contenedor flexible (como el ejemplo dado en la pregunta anterior).
Así que para centrar el elemento de flexión tanto horizontal como verticalmente, configúrelo con margin:auto
Flexbox Demo 2
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
}
.box span {
margin: auto;
}
<div class="box">
<span>margin:auto on a flex item centers it both horizontally and vertically</span>
</div>
NB: todo lo anterior se aplica al centrado de elementos mientras se colocan en filas horizontales . Este también es el comportamiento predeterminado, porque, de forma predeterminada, el valor de flex-direction es row . Si, sin embargo, los elementos flexibles deben distribuirse en columnas verticales , entonces flex-direction: column debe establecerse en el contenedor para establecer el eje principal como columna y, además, las propiedades de justify-content y elementos de align-items ahora funcionan correctamente. con justify-content: center centrado justify-content: center vertical y elementos de align-items: center centrado align-items: center horizontalmente)
flex-direction: column demostración
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 18px;
font-style: oblique;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: center;
/* vertically aligns items */
align-items: center;
/* horizontally aligns items */
}
p {
margin: 5px;
}
<div class="box">
<p>
When flex-direction is column...
</p>
<p>
"justify-content: center" - vertically aligns
</p>
<p>
"align-items: center" - horizontally aligns
</p>
</div>
Un buen lugar para comenzar con Flexbox para ver algunas de sus características y obtener la sintaxis para una máxima compatibilidad con el navegador es flexyboxes
Además, el soporte del navegador hoy en día es muy bueno: caniuse
Para la compatibilidad entre navegadores para la display: flex y de align-items , puede usar lo siguiente:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Para referencia y para agregar una respuesta más simple:
CSS puro:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
O como una mezcla SASS / SCSS:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Usar por:
.class-to-center {
@include vertical-align;
}
Por la publicación del blog de Sebastian Ekström, Vertical alinee cualquier cosa con solo 3 líneas de CSS :
Este método puede hacer que los elementos estén borrosos debido a que el elemento se coloca en un "medio píxel". Una solución para esto es establecer su elemento padre en preserve-3d. Como siguiendo
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Vivimos en 2015+ y Flex Box es compatible con todos los principales navegadores modernos.
Será la forma en que los sitios web están hechos de aquí en adelante.
¡Aprenderlo!
Para una sola línea de texto (o un solo carácter) puede utilizar esta técnica:
Se puede usar cuando #box tiene una altura relativa no fija en% .
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Vea la demostración en vivo en JsBin (más fácil de editar CSS) o JsFiddle (más fácil de cambiar la altura del marco de resultados).
Si desea colocar texto interno en HTML, no en CSS, entonces necesita ajustar el contenido del texto en un elemento en línea adicional y editar #box::after para que coincida. (Y, por supuesto, content: propiedad debe ser eliminada.)
Por ejemplo,
<div id="box"><span>TextContent</span></div>
En este caso, #box::after debe reemplazarse por #box span .
Para el soporte de IE8 debes reemplazar :: con :
Prueba el siguiente código:
display: table-cell;
vertical-align: middle;
div {
height: 80%;
width: 100%;
text-align: center;
display: table-cell;
vertical-align: middle;
background: #4CAF50;
color: #fff;
font-size: 50px;
font-style: italic;
}
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s
</div>
Pruebe esta solución :
.EXTENDER {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.PADDER-CENTER {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
Construido utilizando CSS + .
Pruebe la propiedad de transformación:
#box {
height: 90px;
width: 270px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Puede hacerlo fácilmente agregando el siguiente fragmento de código CSS:
display: table-cell;
vertical-align: middle;
Eso significa que tu CSS finalmente se ve como:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Puede utilizar el siguiente fragmento de código como referencia. Está funcionando como un encanto para mí:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vertically Center Text</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.centered-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body style="background:#3cedd5">
<div class="centered-text">
<h1>Yes, it''s my landing page</h1>
<h2>Under construction, coming soon!!!</h2>
</div>
</body>
</html>
La salida del fragmento de código anterior es la siguiente:
Crédito del código fuente: codepuran.com/web-designing/… codepuran.com/web-designing/…
Puedes probar este enfoque básico:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Sin embargo, solo funciona para una sola línea de texto, porque configuramos la altura de la línea a la misma altura que el elemento de cuadro que contiene.
Un enfoque más versátil.
Esta es otra forma de alinear el texto verticalmente. Esta solución funcionará para una sola línea y varias líneas de texto, pero aún requiere un contenedor de altura fija:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
El CSS solo dimensiona el <div> , verticalmente el centro alinea el <span> al establecer la altura de la línea del <div> igual a su altura, y hace del <span> un bloque en línea con vertical-align: middle . Luego establece la altura de la línea en normal para el <span> , por lo que su contenido fluirá naturalmente dentro del bloque.
Simulación de visualización de tabla
Y aquí hay otra opción, que puede no funcionar en los navegadores más antiguos que no admiten display: table y display: table-cell (básicamente solo Internet Explorer 7). Usando CSS simulamos el comportamiento de las tablas (ya que las tablas admiten la alineación vertical), y el HTML es el mismo que el segundo ejemplo:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Utilizando posicionamiento absoluto
Esta técnica utiliza un elemento de posición absolutamente superior, inferior, izquierda y derecha a 0. Se describe con más detalle en un artículo en Smashing Magazine, Absolute Horizontal And Vertical Centering in CSS .
Solo me gustaría extender la respuesta de @michielvoo para liberar la necesidad de la altura de la línea y la respiración de la altura div. Básicamente es una versión simplificada como esta:
div {
width: 250px;
/* height: 100px;
line-height: 100px; */
text-align: center;
border: 1px solid #123456;
background-color: #bbbbff;
padding: 10px;
margin: 10px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>All grown-ups were once children... but only few of them remember it</span>
</div>
<div>
<span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>
NOTA: se necesita una parte comentada de css para fixed-height de la envolvente div .
También puede utilizar las siguientes propiedades.
display: flex;
align-content: center;
justify-content : center;
Todo el crédito es para el propietario de este enlace @Sebastian Ekström Link ; por favor, pasa por esto codepen en acción codepen . Al leer el artículo anterior también creé un violín de demostración .
Con solo tres líneas de CSS (excluyendo los prefijos de los proveedores) podemos hacerlo con la ayuda de una transformación: la traducción se centra verticalmente en lo que queramos, incluso si no sabemos su altura.
La transformación de la propiedad CSS se usa generalmente para rotar y escalar elementos, pero con su función de traslación, ahora podemos alinear elementos verticalmente. Por lo general, esto se debe hacer con posicionamiento absoluto o ajuste de alturas de línea, pero esto requiere que usted conozca la altura del elemento o que solo trabaje en texto de una sola línea, etc.
Entonces, para hacer esto escribimos:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Eso es todo lo que necesitas. Es una técnica similar al método de posición absoluta, pero con la ventaja de que no tenemos que establecer ninguna altura en el elemento o posición-propiedad en el padre. ¡Funciona directamente, incluso en Internet Explorer 9 !
Para hacerlo aún más simple, podemos escribirlo como una mezcla con los prefijos de sus proveedores.
Una solución muy simple y poderosa para alinear verticalmente el centro:
.outer-div {
height: 200px;
width: 200px;
text-align: center;
border: 1px solid #000;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
}
<div class="outer-div">
<span class="inner">No data available</span>
</div>
Vi las respuestas anteriores, y funcionarán solo para ese ancho de pantalla (no responde). Para el responsive tienes que usar flex.
Ejemplo:
div{ display:flex; align-item:center;}
Enfoque flexible
div {
width: 250px;
min-height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #123456;
margin-bottom:5px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet.</span>
</div>
<div>
Para todas sus necesidades de alineación vertical!
Declara este Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Entonces inclúyelo en tu elemento:
.element{
@include vertical-align();
}
Posicionamiento absoluto y estiramiento
Al igual que con el método anterior, éste comienza estableciendo la posición en los elementos padre e hijo como relativo y absoluto, respectivamente. A partir de ahí las cosas difieren.
En el código a continuación, una vez más he usado este método para centrar al niño tanto horizontal como verticalmente, aunque solo se puede usar el método para centrar verticalmente.
html
<div id="parent">
<div id="child">Content here</div>
</div>
css
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
La idea con este método es intentar que el elemento secundario se extienda a los 4 bordes estableciendo los valores superior, inferior, derecho e izquierdo a 0. Debido a que nuestro elemento secundario es más pequeño que nuestros elementos principales, no puede alcanzar todos 4 aristas.
Al establecer auto como el margen en los 4 lados, sin embargo, los márgenes opuestos son iguales y muestra nuestro div hijo en el centro del div padre.
Desafortunadamente, lo anterior no funcionará en IE7 y más adelante, y al igual que en el método anterior, el contenido dentro del div niño puede crecer demasiado y hacer que se oculte.
.box {
width: 100%;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
.height {
line-height: 170px;
height: 170px;
}
.transform {
height: 170px;
position: relative;
}
.transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
Lorem ipsum dolor sit
</div>
<hr />
<h4>Using Transform</h4>
<div class="box transform">
<p>Lorem ipsum dolor sit</p>
</div>
.element{position: relative;top: 50%;transform: translateY(-50%);}
Agregue este pequeño código en la propiedad CSS de su elemento. Es asombroso. ¡Intentalo!