En la era del diseño de tablas, no es necesario pensar demasiado en el centrado vertical. En las celdas, el valor predeterminado es el centrado vertical de una línea de texto, y tres líneas de texto también estarán centradas verticalmente. Realice el diseño de la página web CSS para cambiar el formulario. El texto se coloca en la parte superior del contenedor de forma predeterminada.
Como se muestra a continuación:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeza> <meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" /> <título>chinaz.com</título> <tipo de estilo="texto/css"> #SeñorJin { ancho: 500 px; altura: 200 px; borde: 1px sólido #03c; alineación de texto:centro; } </estilo> </cabeza> <cuerpo> <div id="MrJin"><a href="http://www.52CSS.com/">Diseño web CSS</a></div> </cuerpo> </html> |
En este caso, ¿cómo centrar verticalmente el texto? Dividido en tres situaciones:
1. Si es una sola línea de texto, puede utilizar el interlineado para resolver el problema.
Le agregamos la definición de interlineado para obtener el efecto de centrar verticalmente una sola línea de texto.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeza> <meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" /> <título>chinaz.com</título> <tipo de estilo="texto/css"> #SeñorJin { ancho: 500 px; altura: 200 px; borde: 1px sólido #03c; alineación de texto:centro; altura de línea: 200 px; } </estilo> </cabeza> <cuerpo> <div id="MrJin"><a href="http://www.52CSS.com/">Diseño web CSS </a></div> </cuerpo> </html> |
2. Si se trata de texto de varias líneas, el contenedor principal no tiene una altura fija.
Podemos usar relleno para resolver el problema.
Establezca el relleno del contenedor en el mismo valor fijo y la altura del contenedor aumentará a medida que aumenta el contenido.
Utilícelo para lograr el centrado vertical de texto de varias líneas.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeza> <meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" /> <título>www.52CSS.com</título> <tipo de estilo="texto/css"> #SeñorJin { ancho: 500 px; relleno: 50px 0; borde: 1px sólido #03c; alineación de texto:centro; } </estilo> </cabeza> <cuerpo> <div id="MrJin"><p><a href="http://www.52CSS.com/">Diseño web CSS </p><p>¡Estamos comprometidos a impulsar los sitios web chinos! </a></p></div> </cuerpo> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeza> <meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" /> <título>chinaz.com</título> <tipo de estilo="texto/css"> #SeñorJin { ancho: 500 px; relleno: 50px 0; borde: 1px sólido #03c; alineación de texto:centro; } </estilo> </cabeza> <cuerpo> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>Diseño web CSS</p> <p>Sitio para webmasters de China</p> <p>¡Estamos comprometidos a impulsar los sitios web chinos! </p> </a></div> </cuerpo> </html> |