html - vertical - centrar texto en div horizontalmente
Cómo centrar el div verticalmente dentro del div padre absolutamente ubicado (9)
Estoy tratando de obtener un contenedor azul en el medio del rosa, pero parece
vertical-align: middle;
no hace el trabajo en ese caso.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Resultado:
Expectativa:
Por favor sugiera cómo puedo lograr eso.
Aquí hay una manera simple de usar el objeto Top.
Por ejemplo: si el tamaño absoluto del elemento es 60px.
.absolute-element {
position:absolute;
height:60px;
top: calc(50% - 60px);
}
Centro vertical y horizontalmente:
.parent{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.c{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
En primer lugar, tenga en cuenta que
vertical-align
solo es aplicable a celdas de tabla y elementos de nivel en línea.
Hay dos formas de lograr alineaciones verticales que pueden o no satisfacer sus necesidades. Sin embargo, te mostraré two methods de mis favoritos:
1. Usando
transform
y
top
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
El punto clave es que un valor de porcentaje en la
top
es relativo a la
height
del bloque contenedor;
Mientras que un valor porcentual en la
transform
s es relativo al tamaño del cuadro en sí (el cuadro delimitador).
Si experimenta
problemas de representación de fuente
(fuente borrosa), la solución es agregar
perspective(1px)
a la declaración de
transform
para que se convierta en:
transform: perspective(1px) translateY(-50%);
Vale la pena señalar que la
transform
CSS
es compatible con IE9 +
.
2. Usando elementos
inline-block
(pseudo-)
En este método, tenemos dos elementos de
inline-block
hermanos que están alineados verticalmente en el medio mediante
vertical-align: middle
declaración del
vertical-align: middle
.
Uno de ellos tiene una
height
del
100%
de su elemento principal y el otro es nuestro elemento deseado cuyo que queríamos alinear en el medio.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Finalmente, deberíamos usar uno de los métodos disponibles para eliminar la brecha entre los elementos de nivel en línea .
Puede hacerlo usando
display:table;
en padre div y
display: table-cell; vertical-align: middle;
display: table-cell; vertical-align: middle;
en niño div
<div style="display:table;">
<div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;">
<div style="background-color: lightblue; ">test</div>
</div>
</div>
Puede usar
display:table
/
table-cell;
.a{
position: absolute;
left: 50px;
top: 50px;
display:table;
}
.b{
text-align: left;
display:table-cell;
height: 56px;
vertical-align: middle;
background-color: pink;
}
.c {
background-color: lightblue;
}
<div class="a">
<div class="b">
<div class="c" >test</div>
</div>
</div>
Una solución simple adicional
HTML:
<div id="d1">
<div id="d2">
Text
</div>
</div>
CSS:
#d1{
position:absolute;
top:100px;left:100px;
}
#d2{
border:1px solid black;
height:50px; width:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
Use flex blox en su div posicionado para centrar su contenido.
Ver ejemplo https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
.some-absolute-div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
Verifique esta respuesta a un problema similar.
Esta es, con mucho, la forma más fácil que he encontrado.
https://.com/a/26079837/4593442
NOTA. Usé display: -webkit-flex; en lugar de mostrar: flex; para probar dentro de safari.
NOTA. Solo soy un novato, y comparto la ayuda de alguien con experiencia clara.
utilizar este :
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
consulte este enlace: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/