html - texto - vertical align div
CSS-alineación vertical no funciona (8)
Tengo algunos HTML y CSS realmente básicos:
Aquí está el HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="stylesheet.css">
<title>Hello, World!</title>
</head>
<body>
<header>
Hello<sup>World</sup>
</header>
</body>
</html>
Aquí está el CSS:
header {
vertical-align: middle;
height: 60px;
background-color: #00F;
}
Pero el texto no se alinea en el medio. Por qué no?
El atributo vertical-align es solo para elementos en línea. No tendrá ningún efecto sobre los elementos de nivel de bloque, como un div o un párrafo. Si desea alinear verticalmente un elemento en línea con el medio, simplemente use esto.
vertical-align: middle;
Consulte más información aquí: Cómo entender vertical-alinear, o "Cómo (no) centrar verticalmente el contenido"
Este es mi truco favorito para alinear verticalmente cosas, usa flex box, ¡todo debería usar la caja flexible!
header {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
border: black solid 0.1rem;
height: 200px; <!--Insert any height -->
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="stylesheet.css">
<title>Hello, World!</title>
</head>
<body>
<header>
Hello<sup>World</sup>
</header>
</body>
</html>
Flexbox puede hacer esto bastante fácilmente ahora:
header {
display: flex;
align-items: center;
justify-content: center;;
}
La propiedad de vertical-align solo se aplica a:
elementos de nivel de línea y ''table-cell''
Ver este enlace
Puede usar line-height para centrar verticalmente el texto, simplemente hacerlo más grande que el font-size real de la font-size , sin embargo, solo es efectivo si el texto abarca una sola línea.
Alternativamente, puede agregar padding a la parte superior e inferior del elemento del header con valores iguales.
Editado según el comentario: la solución obvia si se usa el elemento de header HTML5 sería hacer que se display: table-cell; en lugar del bloque predeterminado que creo que se aplica el restablecimiento de CSS.
Prueba esto, trabaja muy bien para mí:
/* 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;
Si no desea utilizar una tabla, puede usar vertical-align: middle y display: inline-block mientras utiliza un elemento vacío en línea con una altura del 100%:
<!DOCTYPE><html><body> <!-- Author: brillout.com -->
<div style=''height: 300px;border: 1px solid black;text-align:center''>
<div class=''i''>vertical-align + inline-block<br>trick<br>in action</div>
<div class=''i'' style=''height:100%;width:0px''></div>
</div>
<style> div.i{ display: inline-block; vertical-align: middle } </style>
</body></html>
vertical-align no funciona de la forma que crees que lo hace en los elementos con display:block . La gente usualmente solo usa, por ejemplo, line-height:60px si el texto es lo único en el elemento y todo permanece en la misma línea.
Si entra más material, probablemente sea mejor darle al contenedor una altura si es necesario y ajustar el margen / relleno / etc. de elementos dentro del elemento contenedor hasta que se vea bien.
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
Prueba esto.