[CSS 2.1] Centrer verticalement une image dans une liste

[demonixis]

Bonjour à tous,

Après avoir effectué des recherches sur le sujet, je n'ai pas trouvé de solution à mon problème, d'où mon post d'aujourd'hui, je vais donc vous expliquer ce qu'il se passe.

J'ai une page qui affiche une liste de miniatures (photo, bloc <img />) via une balise de liste (<ul>). Les listes <li> ont un affichage en block et en float, elles ont aussi une taille. Le problème est que les photos qui sont affichées sont soient au format paysage, soit au format portrait (avec un petit texte en dessous).

J'ai réussi à avoir un affichage correct, comme vous pouvez le voir sur cette capture :



Ce que j'aimerais réussir à faire maintenant c'est centrer verticalement et horizontalement ces images (surtout verticalement dans le cas d'une image en format portrait). Mais après avoir tenter plusieurs choses (comme display: table) je ne suis pas arrivé à grand chose.

Mon code à cette forme :

Code :

1
2
3
4
5
<ul id="sortable"> 
  <li><div class="media_item"><img src="..." alt="..." /></div></li> 
  <li><div class="media_item"><img src="..." alt="..." /></div></li> 
  <etc /> 
</ul>

et niveau css voilà ce que j'ai fais pour l'instant :

Code :

1
2
3
4
5
6
7
8
9
.widgetContainerTab.photosTabsContainer #sortable li { 
  display: block; 
  margin: 0px 0px 0px 5px; 
  padding: 0px 7px 10px 7px; 
  float: left; 
  width: 133px; 
  height: 170px; 
  text-align: center; 
}

Auriez vous une idée, une méthode pour centrer ces images ?

Avant j'utilisais une balise table pour réaliser cet affichage, mais je suis passé aux listes pour pouvoir réaliser un tri.

En vous remerciant par avance

Yann.

[briceparmentier]

Salut

Essaie peut-être avec la propriété vertical-align: middle;
Pas sur que ça fonctionne mais ça peut être une piste

A+

[demonixis]

Bonjour,

Merci pour la réponse, j'ai déjà essayé la propriété middle et cela a été sans résultat

Auriez vous d'autres pistes ? J'ai fais des tests avec display: table sur la liste et display: table-cell sur les éléments de liste, mais là aussi je n'ai pas eu le résultat désiré.

En fait le problème c'est que dans ma mise en page je peux avoir du texte sous mes images ou pas et mes images peuvent être en format paysage ou portrait.. ce qui fait que si j'avais tout le temps du texte ou un format bien précis, je pourrais me permettre de faire une mise en page plus "stricte" avec des margin et padding bien définies mais ça n'est pas le cas (la vie est tellement plus intéressante quand il faut se prendre la tête avec 50 possibilités).

[briceparmentier]

Où avais-tu mis la propriété vertical-align ? Dans le CSS de ton <li> ?

Il faudrait plutôt, vu ta construction, que tu la mettes dans le CSS de ta classe "media_item"...

[dav808]

Hello,
Pour que "vertical-align" soit pris en compte, je crois que tu dois afficher tes <li> en ligne:

Code :

1
2
3
4
5
 
li {
  display: inline-block;
  vertical-align: middle;
}

L'utilisation de "float: left" n'est probablement plus nécessaire...

(Si mes souvenirs sont bons: attention à ne pas laisser d'espace entre tes </li><li> car avec ton affichage en ligne, ils seront interprétés à l'affichage. Cela peut te provoquer des petits décalages qu'il faudrait compenser )

[Bisûnûrs]

Il n'y a pas de moyen simple en CSS pour le moment pour faire ce que tu veux. Enfin, il y en a, soit avec un display:inline-block comme juste au-dessus, soit avec un display:table-cell. Seulement, aucune de ces deux solutions ne fonctionnera dans ton cas sur IE 7 et inférieurs.

@dav808 : Un manquement au niveau de IE 7 et inférieurs fait que la valeur inline-block ne fonctionne que sur les éléments "inline" et pas sur les éléments "block".