Artigo Introdução de wulin.com (www.vevb.com): Como centralizar as imagens verticalmente.
A largura e a altura da imagem são desconhecidas e não há tamanho fixo. Sob essa premissa, é bastante problemático tornar a imagem centrada verticalmente em um recipiente com largura e altura fixa. Como os projetos recentes podem usar essa solução, colecionei e resolvi alguns métodos comumente usados.
A figura a seguir é uma renderização ideal. A largura e a altura do recipiente externo são fixas e a largura e a altura da imagem no meio são desconhecidas, mas a imagem deve sempre ser centrada verticalmente em relação ao recipiente externo.
No entanto, o efeito implementado na realidade não é perfeito. Como a análise de cada navegador é diferente, cada navegador terá um desvio de 1px-3px.
Método 1 (XHTML 1.0 Transitional):
Este método é para definir o modo de exibição do contêiner externo para exibir: tabela, aninhe uma tag de extensão fora da tag IMG e defina o modo de exibição do intervalo para exibir: Tabela-célula, para que o alinhamento vertical possa ser facilmente alinhado como elementos da tabela. Obviamente, isso é apenas nos navegadores padrão, o IE6/IE7 também precisa usar o posicionamento.
Parte da estrutura HTML:
<div id = box>
<pan> <img src = imagens/Demo.jpg alt => </span>
</div>
Parte do estilo CSS:
<tipo de estilo = texto/css>
#caixa{
largura: 500px; altura: 400px;
exibição: tabela;
Alinhamento de texto: centro;
Border: 1px Solid #D3D3D3; Background: #FFF;
}
#Box Span {
Exibição: Tabela de células;
Alinhamento vertical: meio;
}
#box img {
borda: 1px sólido #ccc;
}
</style>
<!-[se LTE IE 7]>
<tipo de estilo = texto/css>
#caixa{
Posição: relativa;
estouro: oculto;
}
#Box Span {
Posição: Absoluto;
Esquerda: 50%; topo: 50%;
}
#box img {
Posição: relativa;
Esquerda: -50%; topo: -50%;
}
</style>
<! [endif]->
Método 2 (XHTML 1.0 Transitional):
Os princípios e estruturas da implementação do método 2 e do método 1 são semelhantes e as estruturas são as mesmas. O método 1 usa anotações condicionais e o método 2 usa hack de CSS.
Parte do estilo CSS:
<tipo de estilo = texto/css>
#caixa{
largura: 500px; altura: 400px;
estouro: oculto;
Posição: relativa;
Exibição: Tabela de células;
Alinhamento de texto: centro;
Alinhamento vertical: meio;
Border: 1px Solid #D3D3D3; Background: #FFF;
}
#Box Span {
Posição: estática;
*posição: absoluto; /*Hack para IE6/7*/
TOP: 50%; /*Hack para IE6/7*/
}
#box img {
Posição: estática;
*Posição: relativa; /*Hack para IE6/7*/
topo: -50%; Esquerda: -50%; /* Hack para IE6/7*/
borda: 1px sólido #ccc;
}
</style>
Este método tem uma desvantagem. Em um navegador padrão, como o modo de exibição do contêiner externo #Box é exibido: Tabela-célula, o atributo de margem não pode ser usado para #box e a definição de bordas no IE8 também é inválida.
Método 3 (XHTML 1.0 Strict):
Os navegadores padrão ainda definem o modo de exibição do contêiner externo #Box para exibir: Tabela-célula. O IE6/IE7 usa o método de inserir um par de tags vazias na frente da tag IMG.
Parte da estrutura HTML:
<div id = box> <i> </i> <img src = imagens/demo.jpg alt => </div>
Parte do estilo CSS:
<tipo de estilo = texto/css>
#caixa{
largura: 500px; altura: 400px;
Exibição: Tabela de células;
Alinhamento de texto: centro;
Alinhamento vertical: meio;
Border: 1px Solid #D3D3D3; Background: #FFF;
}
#box img {
borda: 1px sólido #ccc;
}
</style>
<!-[se ie]>
<tipo de estilo = texto/css>
#Box I {
Exibição: bloco embutido;
Altura: 100%;
Alinhamento vertical: meio
}
#box img {
Alinhamento vertical: meio
}
</style>
<! [endif]->
O método 3 também se aplica à transição XHTML 1.0. Os métodos acima são coletados no site de ensino da web. Por enquanto, apenas esses três métodos estão bastante satisfeitos e a compatibilidade é boa e as limitações são relativamente pequenas. Também testei alguns métodos um por um, mas os resultados não são ideais e existem diferenças bastante diferentes entre diferentes navegadores. Além disso, o Situ Zhengmei também coletou alguns métodos aqui.
Pensando: Muitos métodos dependem de definir o modo de exibição do contêiner externo em uma tabela para obter centralização vertical, ou seja, a div para simular a tabela. Quão bom seria se o CSS tivesse uma propriedade para alcançar esse efeito. Se você tem um bom método, poderá compartilhá -lo.
original: