verticalmente vertical texto imagen horizontalmente horizontal elementos div dentro contenido centro centrar alinear html css css3

html - texto - ¿Cómo centrar un elemento horizontal y verticalmente?



centrar texto vertical y horizontal css (13)

A continuación se muestra el enfoque de la caja flexible para obtener el resultado deseado

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Flex-box approach</title> <style> .tabs{ display: -webkit-flex; display: flex; width: 500px; height: 250px; background-color: grey; margin: 0 auto; } .f{ width: 200px; height: 200px; margin: 20px; background-color: yellow; margin: 0 auto; display: inline; /*for vertically aligning */ top: 9%; /*for vertically aligning */ position: relative; /*for vertically aligning */ } </style> </head> <body> <div class="tabs"> <div class="f">first</div> <div class="f">second</div> </div> </body> </html>

Estoy tratando de centrar el contenido de mis pestañas verticalmente, pero cuando agrego la display:inline-flex estilo css display:inline-flex , desaparece la alineación horizontal de texto.

¿Cómo puedo hacer ambas alineaciones de texto x e y para cada una de mis pestañas?

* { box-sizing:border-box; } #leftFrame { background-color:green; position:absolute; left:0; right:60%; top:0; bottom:0; } #leftFrame #tabs { background-color:red; position:absolute; top:0; left:0; right:0; height:25%; } #leftFrame #tabs div { border:2px solid black; position:static; float:left; width:50%; height:100%; text-align:center; display: inline-flex; align-items: center; }

<div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div>

Ejecute este fragmento de código y vea un div alineado vertical y horizontalmente.

html, body, .container { height: 100%; width: 100%; } .container { display: flex; align-items: center; justify-content: center; } .mydiv { width: 80px; }

<div class="container"> <div class="mydiv">h & v aligned</div> </div>

Grid css enfoque

#wrapper { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } .main { background-color: #444; }

<div id="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box main"></div> </div>

La mejor manera de centrar una caja tanto vertical como horizontalmente, es usar dos contenedores:

El contenedor exterior:

  • debe tener display: table;

El contenedor interior:

  • debe tener display: table-cell;
  • debe tener vertical-align: middle;
  • debe tener text-align: center;

El cuadro de contenido:

  • debe tener display: inline-block;
  • debe ajustar la alineación horizontal del texto, a menos que desee centrar el texto

Demostración:

body { margin : 0; } .outer-container { display: table; width: 80%; height: 120px; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; }

<div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

Véase también este violín !

Centrado en el centro de la página:

Para centrar su contenido en el medio de su página, agregue lo siguiente a su contenedor externo:

  • position : absolute;
  • width: 100%;
  • height: 100%;

Aquí hay una demo para eso:

body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; }

<div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

Véase también este violín !

La solución más simple y limpia para mí es usar la propiedad "transformación" de CSS3:

.container { position: relative; } .container a { position: absolute; top: 50%; transform: translate(0,-50%); }

<div class="container"> <a href="#">Hello world!</a> </div>

Otro enfoque es utilizar tabla:

<div style="border:2px solid #8AC007; height:200px; width:200px;"> <table style="width:100%; height:100%"> <tr style="height:100%"> <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td> </tr> </table> </div>

Para centrar la división en una página, verifique el enlace del violín.

#vh { border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); padding: 25px; width: 200px; height: 200px; background: white; text-align: center; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

<div id="vh">Div to be aligned vertically</div>

Actualizar Otra opción es usar el recuadro flexible, marcar el enlace de violín

.vh { background-color: #ddd; height: 200px; align-items: center; display: flex; } .vh > div { width: 100%; text-align: center; vertical-align: middle; }

<div class="vh"> <div>Div to be aligned vertically</div> </div>

Para centrar vertical y horizontalmente un elemento, también podemos utilizar las propiedades mencionadas a continuación.

Esta propiedad CSS alinea los elementos verticalmente y acepta los siguientes valores:

inicio flexible : los artículos se alinean con la parte superior del contenedor.

extremo flexible : los artículos se alinean con la parte inferior del contenedor.

Centro : los artículos se alinean en el centro vertical del contenedor.

línea base : los elementos se muestran en la línea base del contenedor.

estirar : los artículos se estiran para adaptarse al contenedor.

Esta propiedad CSS justifica el contenido , que alinea los elementos horizontalmente y acepta los siguientes valores:

inicio flexible : los artículos se alinean con el lado izquierdo del contenedor.

extremo flexible : los artículos se alinean con el lado derecho del contenedor.

Centro : los artículos se alinean en el centro del contenedor.

espacio intermedio : los elementos se muestran con el mismo espaciado entre ellos.

espacio alrededor : los elementos se muestran con el mismo espacio a su alrededor.

Si CSS3 es una opción (o si tiene un respaldo), puede usar la transformación:

.center { right: 50%; bottom: 50%; transform: translate(50%,50%); position: absolute; }

A diferencia del primer enfoque anterior, no desea usar izquierda: 50% con la traducción negativa porque hay un error de desbordamiento en IE9 +. Utilice un valor correcto y no verá barras de desplazamiento horizontales.

Simplemente haga arriba, abajo, izquierda y derecha a 0.

<html> <head> <style> <div> { position: absolute; margin: auto; background-color: lightblue; width: 100px; height :100px; padding: 25px; top :0; right :0; bottom:0; left:0; } </style> </head> <body> <div> I am in the middle</div> </body> </html>

.align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; }

<div class=''align''> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

El primer niño se alineará verticalmente y horizontalmente en el centro

  • Enfoque 6

/*Change units to "%", "px" or whatever*/ #wrapper{ width: 50%; height: 70vh; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #left{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background: red; } #right{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: green; } .txt{ text-align: center; line-height: 50vh; }

<div id="wrapper"> <div id="left" class="txt">Left</div> <div id="right" class="txt">Right</div> </div>

.container{ width: 50%; //Your container width here height: 50%; //Your container height here position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

.container { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

<div class="container"> <span>I''m vertically/horizontally centered!</span> </div>

  • Enfoque 2 - Método Flexbox:

    Ejemplo aquí / Ejemplo de pantalla completa

    En los navegadores compatibles , configure la display del elemento objetivo para flex y usar elementos de align-items: center para centrado vertical y justify-content: center para centrado horizontal. Simplemente no olvide agregar prefijos de proveedores para soporte adicional del navegador ( ver ejemplo ).

html, body, .container { height: 100%; } .container { display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; }

<div class="container"> <span>I''m vertically/horizontally centered!</span> </div>

  • Enfoque 3 - table-cell / vertical-align: middle :

    Ejemplo aquí / Ejemplo de pantalla completa

    En algunos casos, deberá asegurarse de que la altura del elemento html / body esté establecida en 100% .

    Para la alineación vertical, establezca el width / height del elemento principal en 100% y agregue display: table . Luego, para el elemento hijo, cambie la display a table-cell y agregue vertical-align: middle .

    Para el centrado horizontal, puede agregar text-align: center para centrar el texto y cualquier otro elemento inline . Alternativamente, podría usar el margin: 0 auto , asumiendo que el elemento es nivel de block .

html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

<section class="parent"> <div class="child">I''m vertically/horizontally centered!</div> </section>

  • Enfoque 4: posicionamiento absoluto del 50% desde la parte superior con desplazamiento:

    Ejemplo aquí / Ejemplo de pantalla completa

    Este enfoque supone que el texto tiene una altura conocida, en este caso, 18px . Simplemente posicione el elemento 50% desde arriba, en relación con el elemento principal. Use un valor de margin-top negativo que sea la mitad de la altura conocida del elemento, en este caso - -9px .

html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

<div class="container"> <p>I''m vertically/horizontally centered!</p> </div>

  • Enfoque 5: el método de line-height (menos flexible, no sugerido):

    Ejemplo aquí

    En algunos casos, el elemento padre tendrá una altura fija. Para el centrado vertical, todo lo que tiene que hacer es establecer un valor de line-height en el elemento secundario igual a la altura fija del elemento principal.

    Aunque esta solución funcionará en algunos casos, vale la pena señalar que no funcionará cuando haya varias líneas de texto, como esta .

.parent { height: 200px; width: 400px; background: lightgray; text-align: center; } .parent > .child { line-height: 200px; }

<div class="parent"> <span class="child">I''m vertically/horizontally centered!</span> </div>