Expresa-la

Antes tiñamos que tratar con CSS para crear esquemas das nosas páxinas, aliñado algún contido dunha cela de táboa parecía xogar só neno. Só ten que definir o "aliñamento" ou propiedade "valign" da táboa para o aliñamento da súa elección, peza de bolo!
Con esquemas CSS, aínda que teñamos "vertical-align" propiedade para os elementos, non parece ser tan simple como a "aliñar" ou "valign" propiedades. Para ser máis specifiic o "vertical-align" nunca parece resolver calquera dos seus problemas, especialmente se se escribir unha peza de cross-browser CSS.

Sen o uso de táboas HTML, o problema da centralización no obxecto, sexa unha imaxe ou un texto dentro de unha división contén, probablemente foi cada UI / CSS pesadelo desenvolvedores nalgún punto. Este problema aínda extrapola os seus problemas de aliñar, se o obxecto a ser centralizado é de natureza dinámica, é dicir, cando a súa altura é variable (momento descoñecido).

Aínda que non hai ningunha solución coñecida para a fronte que ía traballar en toda a gama de navegadores que temos que tratar, a solución que eu tente chegar a fai parece funcionar en todos os navegadores poucos que eu tente o (IE6, IE 7 , FF).

SOLUCIÓN:
En navegadores como Mozilla, Opera e Safari, O estraño comportamento "vertical-align" propiedade pode ser levado para os seus sentidos, simplemente definindo o "display" de propiedade da división contén a "table-cell" (Mostrar: table-cell) .

O problema aínda permanece coa familia de navegadores IE, que, con todo, parecen non entender o que co "table-cell" propiedade e ignorantes como son, simplemente ignore-lo. A solución dada a continuación, aínda que sinxela, anuncios de algúns elementos máis para o seu don HTML para facer as cousas ocorrer.

A CSS e HTML parece que
.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/> visualizacións: 3456 </ div>
</ Div>
</ Div>

O resultado parece isto: -

ver a demo aquí | baixar arquivos de orixe (baixo 448 veces)

---

Comprender a solución:
Para os navegadores que entenden Mostrar: table e display: table-cell propiedades, el raramente precisa de calquera explicación. Para o IE, co uso dun hack IE específico (hack hash), é absolutamente colocar o recipiente do obxecto (obj_container) na metade da altura dispoñible. Entón obxecto (obj) dentro é a posición relativa e é movido por medio da súa altura ... Ben! Paréceme entender o ollar no seu rostro, pero funciona. Proba!
As técnicas anteriores son combinados para dar a solución de navegador cruz.

---

O CSS pode ser facilmente modificado como segue para alcanzar, vertical-align: top ou vertical-align: bottom

TOP Aliñar 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/> visualizacións: 1234 </ div>
</ Div>
</ Div>

O resultado parece isto: -

Aliñar ao final 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/> visualizacións: 1234 </ div>
</ Div>
</ Div>

O resultado parece isto: -

ver a demo aquí | Descarga aquí

---

Horizontal centralización do obxecto simplemente alcanzado coa propiedade marxe, definindo a marxe esquerda ea marxe dereita auto

Parece que as idades, dende que eu estaba tentando atopar unha solución razoable a este problema de liña. Pero agora, con esta solución, me sinto en paz pouco.

Cunha esperanza de que algún día

• vertical-liña propiedade en CSS funcionará como fai dentro dunha cela de táboa, sen ter que bater moito sobre o arbusto
• Polo menos, establecendo Margin-top: auto e Margin-bottom: auto, dará como resultado mesmo coa marxe esquerda ea marxe dereita conxunto para auto
• As guerras do navegador vai acabar algún día.
• Haberá só un navegador para a ALL.

Descarga o CSS e HTML da solución anterior aquí (Trasladado 448 veces) .. de compreensibilidade, CSS non está a ser óptimo

PS: E ao parecer, son miniaturas de algunhas fotos que teñan premendo ...