L'exprimer

Avant, nous avions à traiter avec les CSS pour créer nos mises en page, l'alignement du contenu dans une cellule de tableau semblait jeu juste enfant. Il suffit de mettre le "align" ou "valign" propriété de la table pour avoir l'alignement de votre choix, un morceau de gâteau!
Avec mises en page CSS, si nous avons "vertical-align" propriété pour les éléments, il ne semble pas être aussi simple que le "align" ou "valign" propriétés. Pour être plus specifiic le "vertical-align" ne semble jamais à résoudre tous vos problèmes, surtout si on écrire une pièce de cross-browser CSS.

Sans l'utilisation des tableaux HTML, LE PROBLÈME de centrage sur l'objet, que ce soit une image ou un texte dans une division contenant, a probablement été tous les cauchemar UI / CSS développeurs à un moment donné. Ce problème extrapole encore vos soucis d'alignement, si l'objet à être centré est de nature dynamique, c'est à dire lorsque sa hauteur est variable (hauteur inconnue).

Bien qu'il n'y ait pas de solution connue simple qui fonctionne sur toute la gamme des navigateurs que nous avons à traiter, la solution que j'ai essayé d'arriver à ne semble pas fonctionner dans les navigateurs peu que je l'ai essayé dans (IE6, IE 7 , FF).

SOLUTION:
Dans les navigateurs comme Mozilla, Opera et Safari, L'étrange comportement "vertical-align" propriété peut être mis à la raison, tout simplement en réglant le "display" propriété de la division contenant de "table-cell" (display: table-cell) .

Le problème reste encore avec la famille des navigateurs IE, qui, pourtant ne semble pas comprendre ce qu'il faut avec la "table-cell« la propriété et ignorants qu'ils sont, ils ont juste l'ignorer. La solution donnée ci-dessous, bien que simples, les annonces de quelques éléments plus DOM à votre HTML pour faire bouger les choses.

Le CSS et HTML ressemble à ceci
.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/> vues: 3456 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

voir la démo ici | Les fichiers source Télécharger (téléchargé 451 fois)

---

Comprendre la solution:
Pour les navigateurs qui comprennent display: table et display: table-cell propriétés, il a rarement besoin d'explication. Pour IE, avec l'utilisation d'un hack IE spécifique (hack de hachage), nous avons absolument positionner le conteneur d'objet (obj_container) dans la moitié de la hauteur disponible. Puis objet (obj) dans est la position relative et est déplacé par la moitié de sa hauteur ... Eh bien! Il me semble comprendre le regard de la sur votre visage, mais il fonctionne. Essayez-le!
Les techniques ci-dessus sont combinés pour nous donner la solution ci-dessus navigateur croix.

---

Le CSS peut être facilement modifié comme ci-dessous pour obtenir, vertical-align: top ou vertical-align: bottom

TOP Aligner 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/> vues: 1234 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

Aligner en bas 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/> vues: 1234 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

voir la démo ici | Télécharger ici

---

Centrage horizontal de l'objet tout simplement réalisé avec la propriété margin, en définissant la marge de gauche et la marge à droite à l'auto

On dirait que les âges, depuis que j'ai essayé de trouver une solution raisonnable à ce problème d'alignement. Mais maintenant, avec cette solution, je me sens à peu de paix.

Avec un espoir qu'un jour

• vertical-alignement propriété CSS fonctionne comme il le fait dans une cellule de tableau, sans avoir à battre beaucoup plus autour du pot
• Au moins, la mise en margin-top: auto et margin-bottom: auto, donnera le même résultat qu'avec la marge gauche et l'ensemble margin-right à auto
• Les guerres du navigateur sera plus un jour.
• Il y aura juste un navigateur pour TOUS.

Télécharger le CSS et HTML de la solution ci-dessus ici (Téléchargé 451 fois) .. pour l'intelligibilité, la CSS n'est pas optimisé

PS: Et en passant, ceux qui sont des vignettes de quelques photos que j'ai cliqué ...