28172 sujets

CSS et mise en forme, CSS3

Centrer une image vertical

Bonsoir, je voudrais centrer une image de taille fixe verticalement


<div id="gauche"><img src="administration/tatouage.png"></div>




#gauche {width: 32%; float: left; text-align: center; height: 93%; line-height: 93%;}
#gauche img {vertical-align: middle;}


Mon problème est que l'image reste collé en haut. Je ne vois plus comment faire après plus modif
Essaye de mettre un "line-height:100%" sur ton image.
Elle devrait se centrer verticalement dans la div "gauche"

#gauche {width: 32%; float: left; text-align: center; height: 93%; line-height: 93%}

#gauche img {vertical-align: middle;line-height: 100%}

Modifié par Tetranima (17 Oct 2011 - 09:50)
stephcache a écrit :
Bien oui et je les fait si tu regarde mon code, je vois pas ce que sa change ???

Ce qui change c'est que tu as utilisé une hauteur et un line-height en pourcentages. En CSS, une dimension de 200px fera toujours 200px, mais les valeurs en pourcentages peuvent désigner des choses très différentes selon la propriété concernée.

- height:83% &#8594; l'élément prendra comme hauteur 83% de la hauteur déclarée pour son parent. Si l'élément parent n'a pas de hauteur déclarée (pas de propriété height avec une valeur non ignorée et différente de "auto"), alors la hauteur en pourcentages sera ignorée.
- line-height:83% &#8594; la hauteur de ligne sera 83% de la taille du texte (pour une taille de texte de 16px, ça donnera une hauteur de ligne de 13.28px, sans doute arrondie à 13px par les navigateurs).

En conclusion, la technique de centrage vertical avec line-height ne marche qu'avec des hauteurs non relatives.

Tu devrais peut-être t'intéresser plutôt au centrage vertical avec un conteneur en display:table. Attention, dans ce cas il faut deux conteneurs imbriqués: un en display:table (positionné et dimensionné comme tu le souhaites), et à l'intérieur un conteneur en display:table-cell avec vertical-align:middle.
Effectivement, ma technique de centrage par line-height, je l'utilise avec des valeur fixes.
Dans ce cas-ci elle ne fonctionnera pas.
J'ai trouvé la solution, voila mon code:


<!DOCTYPE html>
<html lang="fr">
<head>
<style type="text/css">
html, body {height: 100%;}
body {color: #fff; margin: 0; padding: 0; background-color:#000;}
a:link, a:visited, a:active, a:hover {color: #000; text-decoration: none;}
#gauche {width: 32%; float: left; text-align: center; height: 93%; background: url("administration/tatouage.svg") no-repeat; background-position : center center;}
#gauche img {width: 80%;}
#centre {width: 35%; float: left; text-align: center; height: 93%;}
#centre img {width: 100%;}
#droit {width: 32%; float: left; text-align: center; height: 93%; background: url("administration/piercing.svg") no-repeat; background-position : center center;}
#droit img {width: 80%;}
#bas {width: 100%; font-size: 200%; font-family: arial; font-style: italic; text-align: center; bottom:0; float: left; color: #cc04c2; text-shadow: 2px 2px 2px #fff;}
</style>
<meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1" />
<title>Booline Tatouage - Piercing</title>
<link rel="icon" type="image/png" href="administratif/mafavicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
</head>
<body>

<aside id="gauche"></aside>

<section id="centre">
<div><img id="logo_titre" src="administration/logo_titre.svg" /></div>
<div><a  href="contenu.php?choix=livre_or" title="Cliquer sur le logo pour entr&eacute;e"><img id="logo" src="administration/logo.svg" /></a></div>
</section>

<aside id="droit"></aside>

<footer id="bas">5 Place de la R&eacute;publique 58300 DECIZE - 03 86 50 21 08</fooder>

</body>
</html>
Sujet clos
Aller à