Al hablar de este tema, algunas personas pueden preguntar: ¿no existe un atributo de alineación vertical en CSS para establecer el centrado vertical? Incluso si algunos navegadores no lo soportan, sólo necesito hacer un poco de CSS.
¡Hackear la tecnología es suficiente! Así que tengo que decir algunas palabras aquí. De hecho, existe un atributo de alineación vertical en CSS, pero solo ocurre para elementos que tienen el atributo valign en el elemento HTML (X).
Efectivo, como <td>, <th>, <caption>, etc. en elementos de tabla. Elementos como <div> y <span> no tienen la función valign, por lo que no se puede usar alineación vertical en ellos.
efecto.
Tutorial relacionado: N formas de centrar div horizontalmente
1. Centrado vertical de una sola fila
Si solo hay una línea de texto en un contenedor, es relativamente sencillo centrarla. Solo necesitamos establecer su altura real para que sea igual a la altura de la línea.
como:
div {
altura: 25 píxeles;
altura de línea: 25 px;
desbordamiento: oculto;
}
Este código es muy simple. La configuración overflow:hidden se usa más adelante para evitar que el contenido exceda el contenedor o provoque un ajuste automático de línea, de modo que no se pueda lograr el efecto de centrado vertical. Más enseñanza de CSS
Procedimiento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<title>Centrar verticalmente una sola línea de texto</title>
<meta http-equiv="Tipo de contenido" content="texto/html; charset=utf-8" />
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div {
altura: 25 píxeles;
altura de línea: 25 px;
borde: 1px sólido #FF0099;
color de fondo: #FFCCFF;
}
</estilo>
</cabeza>
<cuerpo>
<div>¡Ahora queremos centrar este texto verticalmente! </div>
</cuerpo>
</html>
2. Centrado vertical de varias líneas de texto de altura desconocida
Si la altura de una parte del contenido es variable, entonces podemos usar el último método utilizado para lograr el centrado horizontal mencionado en la sección anterior, que consiste en configurar el Relleno para que la altura superior e inferior
Los valores de relleno pueden ser los mismos. Nuevamente, esta es una forma de "apariencia" de centrado vertical, es solo una forma de hacer que el texto llene completamente el <div>. Puedes usar algo como
El siguiente código:
div {
relleno: 25px;
}
La ventaja de este método es que se puede ejecutar en cualquier navegador y el código es muy simple, pero el requisito previo para la aplicación de este método es que la altura del contenedor debe ser escalable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<title>Centrado vertical de texto de varias líneas</title>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div {
relleno: 25px;
borde: 1px sólido #FF0099;
color de fondo: #FFCCFF;
ancho: 760 px;
}
</estilo>
</cabeza>
<cuerpo>
<div><pre>¡Ahora queremos centrar este texto verticalmente!
div {
relleno: 25px;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
}
</pre></div>
</cuerpo>
</html>
3. Centrar texto de varias líneas con altura fija
Al comienzo de este artículo, dijimos que el atributo de alineación vertical en CSS solo funcionará en etiquetas (X)HTML con atributos valign, pero también hay una visualización en CSS.
El atributo puede simular <table>, por lo que podemos usar este atributo para hacer que <div> simule <table> y usar alineación vertical. Tenga en cuenta que display:table y
Cómo usar display:table-cell, el primero debe configurarse en el elemento principal y el segundo debe configurarse en el elemento secundario, por lo que debemos agregar otro elemento <div> para el texto que debe ubicarse:
div#envoltura {
altura: 400 px;
pantalla: tabla;
}
div#contenido {
alineación vertical: medio;
pantalla: celda de tabla;
borde: 1px sólido #FF0099;
color de fondo: #FFCCFF;
ancho: 760 px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<title>Centrado vertical de texto de varias líneas</title>
<meta http-equiv="Tipo de contenido" content="texto/html; charset=utf-8" />
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div#envoltura {
altura: 400 px;
pantalla: tabla;
}
div#contenido {
alineación vertical: medio;
pantalla: celda de tabla;
borde: 1px sólido #FF0099;
color de fondo: #FFCCFF;
ancho: 760 px;
}
</estilo>
</cabeza>
<cuerpo>
<div id="envoltura">
<div id="content"><pre>¡Ahora queremos centrar este texto verticalmente! Webjx.Com
div#envoltura {
altura: 400 px;
pantalla: tabla;
}
div#contenido {
alineación vertical: medio;
pantalla: celda de tabla;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
}
</pre></div>
</div>
</cuerpo>
</html>
Este método sería ideal, pero desafortunadamente Internet Explorer 6 no comprende correctamente display:table y display:table-cell, por lo que este método se utiliza en
No es válido en Internet Explorer 6 y versiones anteriores. Bueno, ¡eso es deprimente! Sin embargo, tenemos otros métodos 4. Solución en Internet Explorer.
En Internet Explorer 6 y versiones anteriores, hay un error en los cálculos de altura. Después de colocar el elemento principal en Internet Explorer 6, si luego coloca el elemento secundario
Al realizar cálculos porcentuales, la base de cálculo parece ser heredada (si el valor posicionado es un valor absoluto, no hay problema, pero la base de cálculo usando porcentaje ya no será la del elemento)
altura, mientras que la altura de posicionamiento se hereda del elemento padre). Por ejemplo, tenemos el siguiente fragmento de código (X)HTML:
<div id="envoltura">
<div id="subenvoltura">
<div id="contenido">
</div>
</div>
</div>
Si realizamos un posicionamiento absoluto en la subenvoltura, el contenido también heredará este atributo, aunque no se mostrará inmediatamente en la página, si el contenido se posiciona más.
Cuando las filas se colocan entre sí, la proporción del 100 % que utilice ya no será la altura original del contenido. Por ejemplo, si configuramos la posición de subenvoltura en 40%, si queremos que el contenido
Si el borde se superpone con el ajuste, se debe establecer top:-80%, luego, si configuramos el subwrap top:50%, debemos usar 100% para devolver el contenido a su posición original.
, pero ¿y si también configuramos el contenido al 50%? Entonces estará exactamente centrado verticalmente. Entonces podemos usar este método para lograr el centrado vertical en Internet Explorer 6:
div#envoltura {
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 400 px;
posición: relativa;
}
div#subenvoltura {
posición:absoluta;
borde: 1px sólido #000;
arriba: 50%;
}
div#contenido {
borde: 1px sólido #000;
posición: relativa;
arriba: -50%;
}
Por supuesto, este código sólo funcionará en navegadores con problemas informáticos como Internet Exlorer 6. (Pero no lo entiendo. Revisé muchos artículos y no sé si es por el
¿Son iguales o por alguna razón? Parece que muchas personas no están dispuestas a explicar el principio de este error en Internet Exlporer 6. Solo tengo una comprensión superficial y necesito estudiarlo más a fondo).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<title>Centrado vertical de texto de varias líneas</title>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div#envoltura {
borde: 1px sólido #FF0099;
color de fondo: #FFCCFF;
ancho: 760 px;
altura: 400 px;
posición: relativa;
}
div#subenvoltura {
posición:absoluta;
arriba: 50%;
}
div#contenido {
posición: relativa;
arriba: -50%;
}
</estilo>
</cabeza>
<cuerpo>
<div id="envoltura">
<div id="subenvoltura">
<div id="content"><pre>¡Ahora queremos centrar este texto verticalmente!
div#envoltura {
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 500 px;
posición: relativa;
}
div#subenvoltura {
posición:absoluta;
borde: 1px sólido #000;
arriba: 50%;
}
div#contenido {
borde: 1px sólido #000;
posición: relativa;
arriba: -50%;
}</pre>
</div>
</div>
</div>
</cuerpo>
</html>
5. La solución perfecta
Entonces podemos obtener una solución perfecta combinando los dos métodos anteriores, pero esto requiere conocimientos de pirateo de CSS. Para utilizar CSS Hack para distinguir entre navegadores, puede
Consulte este "truco CSS simple: diferenciar IE6, IE7, IE8, Firefox, Opera":
div#envoltura {
pantalla: tabla;
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 400 px;
_posición:relativa;
desbordamiento: oculto;
}
div#subenvoltura {
alineación vertical: medio;
pantalla: celda de tabla;
_posición:absoluta;
_arriba:50%;
}
div#contenido {
_posición:relativa;
_arriba:-50%;
}
En este punto se crea una solución de centrado perfecta.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<title>Centrado vertical de texto de varias líneas</title>
<meta http-equiv="Tipo de contenido" content="texto/html; charset=utf-8" />
<tipo de estilo="texto/css">
cuerpo {tamaño de fuente:12px;familia de fuente:tahoma;}
div#envoltura {
pantalla: tabla;
borde: 1px sólido #FF0099;
color de fondo: #FFCCFF;
ancho: 760 px;
altura: 400 px;
_posición:relativa;
desbordamiento: oculto;
}
div#subenvoltura {
alineación vertical: medio;
pantalla: celda de tabla;
_posición:absoluta;
_arriba:50%;
}
div#contenido {
_posición:relativa;
_arriba:-50%;
}
</estilo>
</cabeza>
<cuerpo>
<div id="envoltura">
<div id="subenvoltura">
<div id="content"><pre>¡Ahora queremos centrar este texto verticalmente!
div#envoltura {
borde: 1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho: 760 px;
altura: 500 px;
posición: relativa;
}
div#subenvoltura {
posición:absoluta;
borde: 1px sólido #000;
arriba: 50%;
}
div#contenido {
borde: 1px sólido #000;
posición: relativa;
arriba: -50%;
}</pre>
</div>
</div>
</div>
</cuerpo>
</html>
ps El valor de alineación vertical de centrado es medio, mientras que el valor de alineación de centrado horizontal es centro. Aunque ambos están centrados, las palabras clave son diferentes.