Antes tínhamos que lidar com CSS para criar layouts de nossas páginas, alinhando algum conteúdo dentro de uma célula da tabela parecia jogar apenas criança. Basta definir o "alinhamento" ou propriedade "valign" da tabela para o alinhamento de sua escolha, pedaço de bolo!
Com layouts CSS, embora tenhamos "vertical-align" propriedade para os elementos, ele não parece ser tão simples como a "alinhar" ou "valign" propriedades. Para ser mais specifiic o "vertical-align" nunca parece resolver qualquer um dos seus problemas, especialmente se forem escrever uma peça de cross-browser CSS.
Sem o uso de tabelas HTML, o problema da centralização no objeto, seja uma imagem ou um texto dentro de uma divisão contendo, provavelmente tem sido cada UI / CSS pesadelo desenvolvedores em algum ponto. Este problema ainda extrapola as suas preocupações de alinhar, se o objeto a ser centralizado é de natureza dinâmica, isto é, quando a sua altura é variável (altura desconhecido).
Embora não há nenhuma solução conhecida para a frente que iria trabalhar em toda a gama de navegadores que temos de lidar, a solução que eu tentei chegar a faz parece funcionar em todos os navegadores poucos que eu tentei em (IE6, IE 7 , FF).
SOLUÇÃO:
Em navegadores como Mozilla, Opera e Safari, O estranho comportamento "vertical-align" propriedade pode ser trazido para os seus sentidos, simplesmente definindo o "display" de propriedade da divisão contendo a "table-cell" (display: table-cell) .
O problema ainda permanece com a família de navegadores IE, que, no entanto, parecem não entender o que com o "table-cell" propriedade e ignorantes como são, eles simplesmente ignorá-lo. A solução dada abaixo, embora simples, anúncios de alguns elementos mais para o seu DOM HTML para fazer as coisas acontecerem.
A CSS e HTML se parece com isso
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> visualizações: 3456 </ div>
</ Div>
</ Div>
O resultado se parece com isso: -
ver a demo aqui | baixar arquivos de origem (baixado 451 vezes)
Compreender a solução: Para os navegadores que entendem display: table e display: table-cell propriedades, ele raramente precisa de qualquer explicação. Para o IE, com o uso um hack IE específico (hack hash), é absolutamente posicionar o contêiner do objeto (obj_container) na metade da altura disponível. Então objeto (obj) dentro é a posição relativa e é movido por meio da sua altura ... Bem! Parece-me compreender o olhar em seu rosto, mas funciona. Experimente! As técnicas acima são combinados para nos dar a solução de browser cruz.
O CSS pode ser facilmente modificado como a seguir para alcançar, vertical-align: top ou vertical-align: bottom TOP Alinhar CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}
HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>
O resultado se parece com isso: -
Alinhar Parte Inferior CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>
O resultado se parece com isso: -
ver a demo aqui | Faça o download aqui
Horizontal centralização do objeto simplesmente alcançado com a propriedade margem, definindo a margem esquerda ea margem direita para auto Parece que as idades, desde que eu estava tentando encontrar uma solução razoável para este problema de alinhamento. Mas agora, com esta solução, me sinto em paz pouco.
Com uma esperança de que algum dia
- vertical-alinhamento propriedade em CSS funcionará como ele faz dentro de uma célula da tabela, sem ter que bater muito em torno do arbusto
- Pelo menos, estabelecendo margin-top: auto e margin-bottom: auto, dará como resultado mesmo com a margem esquerda ea margem direita conjunto para auto
- As guerras do navegador vai acabar algum dia.
- Haverá apenas um navegador para a ALL.
Faça o download do CSS e HTML da solução acima aqui (Transferido 451 vezes) .. de compreensibilidade, o CSS não está sendo otimizado
PS: E pelo jeito, são miniaturas de algumas fotos que tenham clicado ... 
