28172 sujets

CSS et mise en forme, CSS3

Centrer une image verticalement dans un div à hauteur variable

Bonjour,

après avoir cherché pendant plusieurs jours et me trouvant sans solutions, je me tourne vers vous.

J'ai un site d'informations contenant un bandeau d'en-tête et un bandeau de pied de page. Je veux que ces bandeaux soient toujours en haut et en bas de chaque page. Surtout si le contenu d'une page est petit, je veux que mon bandeau reste en bas (ça j'ai réussi).
Le problème que j'ai concerne la page d'accueil:
je veux une image centrée verticalement entre les deux bandeaux. En cas de redimensionnement de la hauteur, je ne veux pas que mon pied de page empiète sur mon image.

voici la structure de ma page html:

<html>
<body>
<div id="global">
<div id="en_tete">
</div>
<div id="contenu">
</div>
<div id="pied_page">
</div>
</div>
</body>
</html>


et mon code css:

html{height: 100%;}
body{height: 100%;}
global{min-height: 100%; position: relative;}
pied_page{position: absolute; bottom: 0; right: 0;}


J'espère avoir été suffisamment clair et vous remercie par avance de votre réponse.

upload/27121-canevassit.jpg
Merci de votre réponse, mais cette page ne répond pas à mon problème.
Le div que je souhaite placer au milieu a une hauteur variable et je souhaite qu'il prenne tout l'espace disponible avec une hauteur minimale (en cas de faible résolution) correspondant à la taille de l'image à afficher. Et je veux centrer cette image dans mon div.
Avant de dire que ça ne correspond pas, il faut lire avec application Smiley rolleyes .

La technique qui fonctionnera pour toi, c'est celle de display:table-cell; évoquée dans la section centrage vertical.
Sujet clos
Aller à