Centrer verticalement une image à taille variable avec CSS et PHP

Oui un peu de développement web sur le blog maintenant, une nouvelle thématique qui n’a rien à voir avec les autres, un blog sans thématique c’est tout ce qu’il ne faut pas faire normalement et moi ça me plaît bien 🙂

Bref non développeurs passez votre chemin!  J’ai longtemps galérer pour centrer verticalement des images dont on ne peut pas connaître à l’avance la taille (par exemple une galerie de photos qui peuvent être en format portrait ou paysage, ou avoir des ratios différents).

J’utilisai un tableau pour chaque image avec une propriété vertical-align, mais d’un c’était vraiment caca comme code, et de deux cela me forçait à inclure une marge sur les cotés (je n’ai jamais réussi à la virer cette fucking marge).

Et hier, après m’être embrouillé avec mon associée à ce sujet « mais je te dis que ce n’est pas possible pauvre graphiste à la con », « mais si ça l’est forcement espèce de développeur de merde » (bon j’en rajoute un peu) j’ai encore une fois eu tort en trouvant une solution toute bête:

<div class="cadres_photo">
<?php
list($width, $height, $type, $attr) = getimagesize("photos/moncul.jpg");
$marge = round((57 - $height) /2);
echo '<img src="photos/moncul.jpg" alt="Mummm" style="margin-top:'.$marge.'px;" />';
?>
</div>

(57 étant le height de .cadres_photo)

Voilà, cela servira peut-être à un mec aussi à l’ouest que moi qui tomberait ici grâce au super référencement de ce blog sans thématique précise 😉

3 réflexions au sujet de « Centrer verticalement une image à taille variable avec CSS et PHP »

  1. Salut, je suis tombé sur ton blog grace à un lien sur un forum.
    J’utilise SPIP et je me demande comment je peux utiliser ton bout de code pour l’appliquer à des images dont je ne connais pas le nom ni les dimensions à l’avance. Il me semble qu’il y a pas loin pourtant, les images sont toujours redimensionnées via php…

  2. Je viens de touver un solution de fainéant, elle marche pas sous Exploreur donc je vais potasser un peu sérieusement mais ça dépanne.
    http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

    je mets dans ma feille de style :
    .image_centree_de_partout{

    text-align:center;

    display:table-cell; /*quò virará pas per IE*/
    vertical-align:middle;/*condicion : table-cell…*/
    width:159px;
    height:110px;

    padding-top:10px;

    border-right:1px solid #ccc;

    border-left:1px solid #ccc;

    }

    visible sur mxl87…

  3. Hello, malheureusement je n’ai jamais utilisé SPIP et donc je ne peux pas t’aider.

    Par contre ta méthode à pour désavantage de ne pas fonctionner sur IE7 et inférieur :/

    EDIT: je viens de voir que tu l’avais écris je suis un boulet… Bon alors bonne nouvelle ça fonctionne sous IE 8 :p

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *