¿Cómo configurar el texto para que se centre verticalmente en el div en lugar de usar la altura de línea?
Varios métodos de centrado horizontal del diseño de página web CSS DIV
1. Centrado vertical de una sola línea
Si solo hay una línea de texto en un contenedor. , realice una comparación de centrado relativo en él. Simple, solo necesitamos establecer su altura real para que sea igual a la altura de la línea de la fila. Por ejemplo:
Fragmento de código proporcionado por imoker.cn:
div {
height:25px
line -height:25px; ;
overflow:hidden;
}
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 produzca un ajuste de línea automático, de modo que no se pueda lograr el efecto de centrado vertical.
Fragmentos de código proporcionados por imoker.cn:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Fragmento de código proporcionado por Mooke:
div {
padding:25px;
}
La ventaja de este método es que puede ejecutarse en cualquier navegador y El código es muy simple, pero el requisito previo para este método es que la altura del contenedor debe ser escalable.
Fragmento de código proporcionado por imoker.cn:
< !DOCTYPE html PUBLIC ". -//W3C//DTD XHTML 1.0 Transitional//ES" "Fragmento de código proporcionado por Amoker:
div#wrap {
height:400px
mostrar: tabla;
}
div#content {
vertical-align:middle; /p>
borde:1px sólido #FF0099
color de fondo:#FFCCFF
ancho:760px
}
Fragmento de código proporcionado por imoker.cn:
< !DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" "Fragmento de código proporcionado por Amoker:
< div id="subwrap ">
< div id="content">
< /div >
< /div>
< /div>
Si posicionamos absolutamente el subenvoltura, entonces el contenido también heredará este atributo, aunque no lo hará. se mostrará inmediatamente en la página, si luego coloca el contenido relativamente, use La proporción del 100% ya no será la altura original del contenido. Por ejemplo, si configuramos la posición de subenvoltura en 40%, si queremos el. borde superior del contenido para que coincida con el ajuste, debemos configurar top:-80%; luego, si configuramos el subenvoltura top:50%, debemos usar 100% para devolver el contenido a su posición original, pero ¿qué pasa si también lo hacemos? ¿Establecer el contenido al 50%? Entonces estará exactamente centrado verticalmente.
Entonces podemos usar este método para lograr el centrado vertical en Internet Explorer 6:
Fragmento de código proporcionado por imoker.cn:
div#wrap {
p>
borde:1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho:760px;
alto:400px;
p>
posición:relativa;
}
div#subwrap {
posición:absoluta
borde; :1px sólido #000;
arriba:50%
}
div#content {
borde:1px sólido #000 ;
p>
position:relative;
top:-50%
}
Por supuesto, este código sólo se puede calcular en Internet Exlporer 6, etc. Sólo funcionará en navegadores problemáticos. (Pero no lo entiendo. Revisé muchos artículos. No sé si es porque la fuente es la misma o por alguna razón. Parece que muchas personas no están dispuestas a explicar el principio de este error en Internet Exlorer. 6. Solo tengo una comprensión superficial del tema. Tengo que ir más allá.
Fragmentos de código proporcionados por imoker.cn:
< !DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//ES" " Fragmento de código proporcionado por (Amoker):
div#wrap {
display:table
border; :1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho:760px
alto: 400px; :relativo;
desbordamiento: oculto
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute
_top:50%
}
div#content; {
_position: relativa;
_top:-50%;
}
En este punto, se crea una solución de centrado perfecta. .
Fragmento de código proporcionado por imoker.cn:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title> Centrar verticalmente varios texto de línea
< meta http-equiv="Content-Type" content="text /html; charset=utf-8" />
< estilo tipo= "text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
borde:1px sólido #FF0099;
color de fondo:#FFCCFF;
ancho:760px
alto:400px;
_position:relative;
overflow:hidden
}
div#subwrap {
vertical- align:medio;
display:table-cell
_position:absolute
_top:50%
}
p>
div#content {
_posición:relativa
_top :-50%
}
< / estilo>
< /cabeza>
< cuerpo>
< div id="wrap">
< div id=" subwrap">
< div id="content">
¡Ahora queremos que este texto se muestre verticalmente centrado!div#wrap {
borde:1px sólido #FF0099
color de fondo:#FFCCFF
ancho:760px;
altura:500px;
posición:relativa
}
div#subwrap {
posición: absoluto;
borde:1px sólido #000;
arriba:50%
}
div#content {
borde:1px sólido #000;
posición:relativa;
arriba:-50%;
< /div>
<
/div>
< /body>
< /html>
p.s. El valor de alineación vertical es medio y el valor de alineación central horizontal. es centro, aunque ambos están centrados pero tienen palabras clave diferentes.