28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer verticalement une image dans un élément de liste.

Bonjour,

C'est une question de débutant mais je n'arrive pas à trouver.


li (hauteur déterminée, disons 200px)
img (hauteur déterminée, disons 100px)

<li>

img

<li>


Je veux centrer verticalement l'image.

J'ai essayé sans succès :

vertical-align: middle

margin:: auto

Pour moi un élément img donc de type inline devrait être centré ainsi mais cela ne donne rien.

J'y arrive en donnant la bonne valeur à margin-top de img, 50px dans notre exemple.

Mais comme mes images ne sont pas toutes de la même hauteur cela oblige à calculer en amont dans le script PHP la valeur de margin-top et de la rentrer par un style dans le code html, donc assez horrible.

Merci d'avance de votre aide.
boteha_2 a écrit :
Bonjour,
C'est une question de débutant mais je n'arrive pas à trouver.

li (hauteur déterminée, disons 200px)
img (hauteur déterminée, disons 100px)
&lt;li&gt;
img
&lt;li&gt;

Je veux centrer verticalement l'image.
J'ai essayé sans succès :
vertical-align: middle
margin:: auto
Pour moi un élément img donc de type inline devrait être centré ainsi mais cela ne donne rien.
J'y arrive en donnant la bonne valeur à margin-top de img, 50px dans notre exemple.
Mais comme mes images ne sont pas toutes de la même hauteur cela oblige à calculer en amont dans le script PHP la valeur de margin-top et de la rentrer par un style dans le code html, donc assez horrible.
Merci d'avance de votre aide.

Ceci devrait répondre à ton besoin.
Bonjour,

Merci de toutes vos réponses, c'est très intéressant.

En préambule, sachant que margin-top: 50px fonctionne bien, je ne comprends pas pourquoi margin: auto ne fonctionne pas naturellement, je veux dire sans changer le display de cette pauvre img.

Je rappelle qu'il s'agit de centrer une image, pas un texte, cela a peut-être son importance.

Dans les exemples de Raphaël :
Si je passe en display:table-cell je centre verticalement mais je perds le centrage horizontal.
Que je n'arrive pas à rétablir avec text-align-center ou margin: auto...
Je ne comprends pas pourquoi...

En display: flex la méthode 1 (margin: auto) ne fonctionne pas pour mon image.
Avec le méthode 2 (flex-direction: column), je centre horizontalement mais pas verticalement.

La méthode de bzh fonctionne.


li {position: relative}
li img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto}


Je ne suis pas arrivé à faire fonctionner la méthode de sepecat mais je vais ré-essayer.
boteha_2 a écrit :

En préambule, sachant que margin-top: 50px fonctionne bien, je ne comprends pas pourquoi margin: auto ne fonctionne pas naturellement, je veux dire sans changer le display de cette pauvre img.


J'imagine qu'à la base c'est une limitation technique toujours est-il que pour margin-top et margin-bottom la valeur auto revient à 0.
bzh a écrit :


J'imagine qu'à la base c'est une limitation technique toujours est-il que pour margin-top et margin-bottom la valeur auto revient à 0.

margin:auto;
est la même chose que 
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;

La valeur "auto" n'a pas en pratique la même signification pour "top" et bottom", ou elle vaut 0, pour "left" et "right" où vaut "ce qu'il faut pour que ce soit centré". En d'autres termes c'est la même chose que 
margin-top:0;
margin-right:auto;
margin-bottom:0;
magin-left:auto;

SI tu veux mettre 50px au dessus et 20px au dessous, par exemple, il faut écrire:
margin-top:50px;
margin-right:auto;
margin-bottom:20px;
magin-left:auto;

ou en notation abrégé: 
margin:50px auto  20px;
Bonjour,

bzh a écrit :

J'imagine qu'à la base c'est une limitation technique toujours est-il que pour margin-top et margin-bottom la valeur auto revient à 0.


D'où la nécessité de passer en position: absolute, ce qui est tordu mais cela marche.
J'aurais préféré une solution dans le flux.

Autrement mon problème est intéressant.
Il s'agit d'une galerie de vignettes avec légendes, les vignettes étant de dimensions variables.
Responsive.

Pour avoir un effet tableau, je suis obligé de calculer la hauteur du containeur de l'image (la hauteur de la plus haute image) et la largeur du containeur parent (la largeur de la plus large image).
C'est fait par PHP et entré directement dans le code html.

Si vous avez des suggestions pour une structure plus légère, merci d'avance.
Modifié par boteha_2 (31 Jul 2016 - 21:29)
Administrateur
PapyJP a écrit :
La valeur "auto" n'a pas en pratique la même signification pour "top" et bottom", ou elle vaut 0

En fait ce n'est pas systématiquement juste. La valeur "auto" est très différente de "0" en modèle Flexbox ou en position absolute par exemple.

boteha_2 a écrit :

Dans les exemples de Raphaël :

Tu es allé un peu trop vite et tu as oublié des parties importantes.

Voici comment faire avec les deux méthodes (table-cell et flexbox) : http://codepen.io/raphaelgoetter/pen/GqdvoG?editors=1100

boteha_2 a écrit :
Si vous avez des suggestions pour une structure plus légère, merci d'avance.

Flexbox Smiley langue
http://codepen.io/raphaelgoetter/pen/ZYereo?editors=110
Modifié par Raphael (24 Jul 2016 - 18:58)
Bonjour Raphaël,

Merci pour tes liens, c'est très intéressant.

Flex semble une super-solution pour mon problème.

Cela dit je crains d'avoir encore quelques clients avec IE7 sous XP, c'est ce qui fait hésiter par rapport à une solution plus lourde avec inline-block ou encore plus universelle avec float.

Je m'y remets le week-end prochain, je vous tiens au courant.
Bonjour,

J'ai mis en ligne sur le site de production.

Pour la disposition responsive je passe par inline-block.

Pour le centrage des images je passe par la solution de PapyJP : position absolute et margin auto.

Cela marche bien, je vous remercie de votre aide une fois de plus.

Je passerai en flexbox un de ces jours mais je laisse encore un peu de temps aux vieux navigateur.

Incidemment j'ai constaté que IE continue à ne pas gérer un <label> dont le contenu est une image.
Je ne comprends pas, tous les autres navigateurs le font et cela semble logique..
Modifié par boteha_2 (31 Jul 2016 - 21:38)
Sujet clos
Aller à