Furgonetas Fannel
tengo lo siguiente <div> dentro de una <body> etiqueta:
<div id="AlertDiv"><h1>Yes</h1></div>
Y estas son sus clases CSS:
#AlertDiv {
position:absolute;
height: 51px;
left: 365px;
top: 198px;
width: 62px;
background-color:black;
color:white;
}
#AlertDiv h1{
margin:auto;
vertical-align:middle;
}
¿Cómo puedo alinear vertical y horizontalmente un <h1> dentro de un <div>?
AlertDiv será más grande que <h1>.
marcel
Puedes añadir line-height:51px a #AlertDiv h1 si sabes que solo será una línea. También agregue text-align:center a #AlertDiv.
#AlertDiv {
top:198px;
left:365px;
width:62px;
height:51px;
color:white;
position:absolute;
text-align:center;
background-color:black;
}
#AlertDiv h1 {
margin:auto;
line-height:51px;
vertical-align:middle;
}
La demostración a continuación también usa márgenes negativos para mantener el #AlertDiv centrado en ambos ejes, incluso cuando se cambia el tamaño de la ventana.
Manifestación: jsfiddle.net/KaXY5
-
Sí, será sólo una línea. Gracias por tu respuesta.
– Vans Fannel
6 de junio de 2011 a las 16:07
-
Esta es realmente la única respuesta verdaderamente válida: hace que la altura y la altura de línea sean iguales y luego funcionará el atributo CSS de alineación vertical. Después de buscar por todas partes esto es todo lo que salió.
– Femi
6 de junio de 2011 a las 16:13
En la etiqueta hX
width: 100px;
margin-left: auto;
margin-right: auto;
-
¿Por qué se requiere el atributo de ancho para que funcione la izquierda/derecha automática?
– arroyo
5 de enero de 2017 a las 20:01
-
en mi caso, solo agregando ancho, como el texto ya estaba alineado al centro, ¡funcionó! Gracias Respuesta muy simple que funciona para la mayoría de los casos.
– pollux1er
14 sep 2020 a las 16:50
Hay una nueva forma de usar transformaciones. Aplique esto al elemento al centro. Empuja hacia abajo la mitad de la altura del contenedor y luego “corrige” la mitad de la altura del elemento.
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
Funciona la mayor parte del tiempo. Tuve un problema donde un div estaba en un div en un li. El elemento de la lista tenía una altura establecida y el exterior divs formado por 3 columnas (Fundación). Los divs de la segunda y tercera columna contenían imágenes, y se centraron bien con esta técnica, sin embargo, el encabezado de la primera columna necesitaba un div envolvente con un conjunto de altura explícito.
Ahora, ¿alguien sabe si la gente de CSS está trabajando en una forma de alinear cosas fácilmente? Al ver que es 2014 e incluso algunos de mis amigos usan Internet regularmente, me preguntaba si alguien había considerado que el centrado sería una función de estilo útil todavía. ¿Solo nosotros entonces?
-
Uso esta técnica para alinear horizontalmente algunos elementos en situaciones donde
text-align:center;no funciona correctamente.position:relative; left:50%;transform:translateX(-??%)...“??” tiene que ajustarse dependiendo de qué tan ancho sea el elemento. Sé que es un poco raro, pero parece funcionar en las pantallas en las que lo he probado hasta ahora.– barba blanca
9 de agosto de 2015 a las 11:59
-
Descubrí que usando
transform:translateX(-??em)es, en realidad, más confiable en varios tamaños de pantalla que??%– barba blanca
11 de agosto de 2015 a las 1:44
-
Aparte: el nuevo video sobre el centrado realizado por el equipo de Chrome Devs en Google es genial youtube.com/watch?v=ncYzTvEMCyE
– Luke Puplet
18 de enero de 2021 a las 14:13
<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
<h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>
Puedes probar el código aquí:
Comenzó un jsviolín aquí.
parece que alineación horizontal trabaja con un text-align : center. Todavía estoy tratando de hacer que la alineación vertical funcione; podría tener que usar absolute posicionamiento y algo asi top: 50% o un precalculado padding desde la parte superior.
Podría agregar relleno a la h1:
#AlertDiv h1 {
padding:15px 18px;
}
Nicu Surdu
Puedes usar display: table-cell para representar el div como una celda de tabla y luego usar vertical-align como lo haría en una celda de tabla normal.
#AlertDiv {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Puedes probarlo aquí:
http://jsfiddle.net/KaXY5/424/