Tu peux commencer par tester la méthode du display:table-cell décrite par Bisûnûrs. Si tu veux assurer un rendu potable sur IE7-, tu devras ajouter un css spécifique par commentaires conditionnels. Cette méthode a l'avantage de laisser ton html vierge de tout ajout.
Mes deux autres propositions supposaient que tu aies possibilité de modifier le php. Dans le premier cas, l'idée est de faire un css généraliste dans ta page css pour les images qui font 240 (la majorité quand même, à voir). genre:
1 2 3 4 5 6 7
| img {
display:block;
margin:0 auto;
position:relative;
top:50%;
margin-top:-120px;
} |
Et, dans ta page php, au moment de l'insertion des images, tu fais un test voir si leur hauteur est inférieur à 240. Si oui, alors tu rajoutes le margin négatif de la moitié de la hauteur dans la balise img, qui prendra le pas sur celui défini ds ton css pour les images de 240:
<img src="/dotclear-files/public/images/jeunesse/2012/.fraise_s.jpg" alt="Fraise (Jean-Charles Sarrazin)" height="186" width="240" style="margin-top="-93px">
L'avantage est que c'est compatible avec les vieux nav.
Pour l'image de fond, cela implique aussi de définir un style en ligne via php (l'url de l'image de fond). Et tu peux la centrer avec un bête background-position:center.
Soit tu l'attribues directement à ton lien, soit à l'image en jouant avec des padding et un heigth / width de 0 pour conserver un alt. Bref à voir comment tu souhaiterais gérer le problème de l'accessibilité avec cette option.
Partager