Ao falar sobre esse assunto, algumas pessoas podem perguntar: não existe um atributo vertical-align em CSS para definir a centralização vertical? Mesmo que alguns navegadores não suportem isso eu só preciso fazer um pouco de CSS
A tecnologia de hack é suficiente! Portanto, tenho que dizer algumas palavras aqui. De fato, existe um atributo de alinhamento vertical em CSS, mas ele ocorre apenas para elementos que possuem o atributo valign no elemento HTML (X).
Eficaz, como <td>, <th>, <caption>, etc. em elementos de tabela como <div> e <span> não possuem o recurso valign, portanto, alinhamento vertical não pode ser usado neles.
efeito.
Tutorial relacionado: N maneiras de centralizar div horizontalmente
1. Centralização vertical em linha única
Se houver apenas uma linha de texto em um contêiner, é relativamente simples centralizá-la. Precisamos apenas definir sua altura real para ser igual à altura da linha.
como:
div{
altura:25px;
altura da linha: 25px;
estouro: oculto;
}
Este código é muito simples. A configuração overflow:hidden é usada posteriormente para evitar que o conteúdo exceda o contêiner ou cause quebra automática de linha, de modo que o efeito de centralização vertical não possa ser alcançado. Mais CSS ensina
Procedimento.
<!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">
<cabeça>
<title> Centralizar verticalmente uma única linha de texto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo {tamanho da fonte: 12px; família da fonte: tahoma;}
div{
altura:25px;
altura da linha: 25px;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
}
</estilo>
</head>
<corpo>
<div>Agora queremos centralizar este texto verticalmente! </div>
</body>
</html>
2. Centralização vertical de múltiplas linhas de texto de altura desconhecida
Se a altura de uma parte do conteúdo for variável, podemos usar o último método usado para obter a centralização horizontal mencionado na seção anterior, que é definir Padding para que as partes superior e inferior
Os valores de preenchimento podem ser os mesmos. Novamente, esta é uma forma de centralização vertical, é apenas uma forma de fazer o texto preencher completamente o <div>. Você pode usar algo como
O seguinte código:
div {
preenchimento: 25px;
}
A vantagem desse método é que ele pode rodar em qualquer navegador e o código é muito simples, mas o pré-requisito para a aplicação desse método é que a altura do contêiner seja escalável.
<!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">
<cabeça>
<title> Centralização vertical de texto multilinha</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo {tamanho da fonte: 12px; família da fonte: tahoma;}
div {
preenchimento: 25px;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
}
</estilo>
</head>
<corpo>
<div><pre>Agora queremos centralizar este texto verticalmente!
div{
preenchimento: 25px;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
}
</pre></div>
</body>
</html>
3. Centralização de texto multilinha com altura fixa
No início deste artigo, dissemos que o atributo vertical-align em CSS só funcionará em tags (X)HTML com atributos valign, mas também há um display em CSS
O atributo pode simular <table>, então podemos usar este atributo para fazer <div> simular <table> e usar alinhamento vertical. Observe que display:table e
Como usar display:table-cell, o primeiro deve ser definido no elemento pai e o último deve ser definido no elemento filho, então precisamos adicionar outro elemento <div> para o texto que precisa ser posicionado:
div#wrap {
altura:400px;
exibição: mesa;
}
div#content{
alinhamento vertical: meio;
display: célula-tabela;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
}
<!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">
<cabeça>
<title> Centralização vertical de texto multilinha</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo {tamanho da fonte: 12px; família da fonte: tahoma;}
div#wrap {
altura:400px;
exibição: mesa;
}
div#content{
alinhamento vertical: meio;
display: célula-tabela;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
}
</estilo>
</head>
<corpo>
<div id="wrap">
<div id="content"><pre>Agora queremos centralizar este texto verticalmente! Webjx.Com
div#wrap {
altura:400px;
exibição: mesa;
}
div#content{
alinhamento vertical: meio;
display: célula-tabela;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
}
</pre></div>
</div>
</body>
</html>
Este método seria ideal, mas infelizmente o Internet Explorer 6 não entende corretamente display:table e display:table-cell, então este método é usado em
É inválido no Internet Explorer 6 e versões anteriores. Bem, isso é deprimente! No entanto, temos outros métodos 4. Solução no Internet Explorer.
No Internet Explorer 6 e versões anteriores, há uma falha nos cálculos de altura. Depois de posicionar o elemento pai no Internet Explorer 6, se você posicionar o elemento filho
Ao realizar cálculos de porcentagem, a base de cálculo parece ser herdada (se o valor posicionado for um valor absoluto, não há problema, mas a base de cálculo usando porcentagem não será mais a do elemento)
altura, enquanto a altura de posicionamento é herdada do elemento pai). Por exemplo, temos o seguinte trecho de código (X)HTML:
<div id="wrap">
<div id="subwrap">
<div id="conteúdo">
</div>
</div>
</div>
Se realizarmos o posicionamento absoluto no subwrap, o conteúdo também herdará esse atributo, embora não seja exibido imediatamente na página, se o conteúdo for posicionado posteriormente.
Quando as linhas são posicionadas umas em relação às outras, a proporção de 100% usada não será mais a altura original do conteúdo. Por exemplo, se definirmos a posição subwrap para 40%, se quisermos tornar o conteúdo
Se a borda se sobrepõe ao wrap, top:-80% deve ser definido, então, se definirmos top:50% do subwrap, devemos usar 100% para retornar o conteúdo à sua posição original;
, mas e se também definirmos o conteúdo para 50%? Então está exatamente centralizado verticalmente. Portanto, podemos usar este método para obter centralização vertical no Internet Explorer 6:
div#wrap {
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
altura:400px;
posição:relativo;
}
div#subwrap{
posição:absoluta;
borda:1px sólido #000;
superior:50%;
}
div#content{
borda:1px sólido #000;
posição:relativo;
superior: -50%;
}
Claro, este código só funcionará em navegadores com problemas de computação, como o Internet Exlorer 6. (Mas não entendo. Verifiquei muitos artigos e não sei se é por causa do
Eles são iguais ou por algum motivo parece que muitas pessoas não estão dispostas a explicar o princípio desse bug no Internet Explorer 6. Tenho apenas um entendimento superficial e preciso estudá-lo mais detalhadamente)
<!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">
<cabeça>
<title> Centralização vertical de texto multilinha</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo {tamanho da fonte: 12px; família da fonte: tahoma;}
div#wrap {
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
altura:400px;
posição:relativo;
}
div#subwrap {
posição:absoluta;
superior:50%;
}
div#content{
posição:relativo;
superior: -50%;
}
</estilo>
</head>
<corpo>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Agora queremos centralizar este texto verticalmente!
div#wrap {
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
altura:500px;
posição:relativo;
}
div#subwrap{
posição:absoluta;
borda:1px sólido #000;
superior:50%;
}
div#content{
borda:1px sólido #000;
posição:relativo;
superior: -50%;
}</pré>
</div>
</div>
</div>
</body>
</html>
5. A solução perfeita
Então podemos obter uma solução perfeita combinando os dois métodos acima, mas isso requer o conhecimento de hack CSS. Para usar CSS Hack para distinguir entre navegadores, você pode
Consulte este "Hack CSS simples: diferencie IE6, IE7, IE8, Firefox, Opera":
div#wrap {
exibição: mesa;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
altura:400px;
_posição:relativo;
estouro: oculto;
}
div#subwrap {
alinhamento vertical: meio;
display: célula-tabela;
_posição:absoluta;
_topo:50%;
}
div#content{
_posição:relativo;
_topo:-50%;
}
Neste ponto, uma solução de centralização perfeita é criada.
<!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">
<cabeça>
<title> Centralização vertical de texto multilinha</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo {tamanho da fonte: 12px; família da fonte: tahoma;}
div#wrap {
exibição: mesa;
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
altura:400px;
_posição:relativo;
estouro: oculto;
}
div#subwrap{
alinhamento vertical: meio;
display: célula-tabela;
_posição:absoluta;
_topo:50%;
}
div#content{
_posição:relativo;
_topo:-50%;
}
</estilo>
</head>
<corpo>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Agora queremos centralizar este texto verticalmente!
div#wrap {
borda:1px sólido #FF0099;
cor de fundo:#FFCCFF;
largura:760px;
altura:500px;
posição:relativo;
}
div#subwrap {
posição:absoluta;
borda:1px sólido #000;
superior:50%;
}
div#content{
borda:1px sólido #000;
posição:relativo;
superior: -50%;
}</pré>
</div>
</div>
</div>
</body>
</html>
ps O valor de centralização vertical vertical-align é médio, enquanto o valor de alinhamento de centralização horizontal é centralizado. Embora ambos estejam centralizados, as palavras-chave são diferentes.