Na era do layout da tabela, não há necessidade de pensar muito na centralização vertical. Nas células, o padrão é a centralização vertical. Uma linha de texto é centralizada verticalmente e três linhas de texto também serão centralizadas verticalmente. Execute o layout da página da web CSS para que o formulário seja alterado. O texto é posicionado na parte superior do contêiner por padrão.
Conforme mostrado abaixo:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeça> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="texto/css"> #MrJin { largura:500px; altura:200px; borda:1px sólido #03c; alinhamento de texto:centro; } </estilo> </head> <corpo> <div id="MrJin"><a href="http://www.52CSS.com/">Web Design CSS</a></div> </body> </html> |
Nesse caso, como centralizar verticalmente o texto? Dividido em três situações:
1. Se for uma única linha de texto, você pode usar o espaçamento entre linhas para resolver o problema.
Adicionamos a definição de espaçamento entre linhas para obter o efeito de centralizar verticalmente uma única linha de texto.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeça> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="texto/css"> #MrJin { largura:500px; altura:200px; borda:1px sólido #03c; alinhamento de texto:centro; altura da linha: 200px; } </estilo> </head> <corpo> <div id="MrJin"><a href="http://www.52CSS.com/">Web Design CSS </a></div> </body> </html> |
2. Se for um texto com várias linhas, o contêiner pai não terá uma altura fixa.
Podemos usar preenchimento para resolver o problema.
Defina o preenchimento do contêiner com o mesmo valor fixo e a altura do contêiner aumentará conforme o conteúdo aumenta.
Use isto para obter centralização vertical de texto de múltiplas linhas.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeça> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52CSS.com</title> <style type="texto/css"> #MrJin { largura:500px; preenchimento:50px 0; borda:1px sólido #03c; alinhamento de texto:centro; } </estilo> </head> <corpo> <div id="MrJin"><p><a href="http://www.52CSS.com/">CSS Web Design </p><p>Estamos comprometidos em impulsionar sites chineses! </a></p></div> </body> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <cabeça> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="texto/css"> #MrJin { largura:500px; preenchimento:50px 0; borda:1px sólido #03c; alinhamento de texto:centro; } </estilo> </head> <corpo> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>Design Web CSS</p> <p>Site para webmasters da China</p> <p>Estamos comprometidos em potencializar sites chineses! </p> </a></div> </body> </html> |