imagen - centrar texto vertical y horizontal css
Alinear verticalmente con CSS 3 (8)
Estaba viendo este problema recientemente y lo intenté:
HTML:
<body>
<div id="my-div"></div>
</body>
CSS:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Aquí está el violín:
Incluso funciona cuando se usa "ancho / alto: automático", en el lugar de las dimensiones fijas. Probado en las últimas versiones en Firefox, Chrome e IE (* gasp *).
Con CSS 3, ¿hay alguna manera de alinear verticalmente un elemento de bloque? ¿Tienes un ejemplo? Gracias.
Hay una manera simple de alinear verticalmente y horizontalmente un div en css.
Solo ponle altura a tu div y aplica este estilo
.hv-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Espero que esto haya ayudado.
Puede alinear verticalmente configurando un elemento para visualizar: inline-block, luego establecer vertical-align: middle;
Siempre uso el tutorial de este artículo para centrar las cosas. Es genial
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
Las reglas esenciales son:
- Haga que el contenedor esté relativamente posicionado, lo que lo declara como un contenedor para elementos absolutamente posicionados.
- Haga que el elemento en sí esté absolutamente posicionado.
- Colóquelo hasta la mitad del contenedor con ''parte superior: 50%''. (Tenga en cuenta que el 50% ''aquí significa el 50% de la altura del contenedor).
- Use una traducción para mover el elemento a la mitad de su altura. (El ''50% ''en'' traducir (0, -50%) ''se refiere a la altura del elemento en sí).
Usando Flexbox:
.container {
display: flex;
/* Vertical align: */
align-items: center;
/* Horizontal align: */
justify-content: center;
}
jsFiddle: http://jsfiddle.net/maars/8Uyvf
Compatibilidad con el navegador: http://caniuse.com/flexbox (algunos navegadores requieren el prefijo)
de dos maneras:
1. Posicionamiento absoluto: debe tener una altura declarada para que esto funcione:
<div>
<div class=''center''>Hey</div>
</div>
div {height: 100%; width: 100%; position: relative}
div.center {
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
}
* 2. Use display: tabla http://jsfiddle.net/B7CpL/2/ *
<div>
<img src="/img.png" />
<div class="text">text centered with image</div>
</div>
div {
display: table;
vertical-align: middle
}
div img,
div.text {
display: table-cell;
vertical-align: middle
}
- Un tutorial más detallado usando pantalla: tabla
Nota: Este ejemplo usa la versión borrador del Módulo de diseño de caja flexible . Ha sido reemplazado por la especificación moderna incompatible .
Centre los elementos secundarios de un cuadro div usando las propiedades box-align y box-pack juntas.
Ejemplo:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Prueba esto también funciona perfectamente:
html:
<body>
<div id="my-div"></div>
</body>
css:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
display: table-cell;
vertical-align: middle
}