Forum > XHTML / CSS > Centrer une image verticalement

Centrer une image verticalement

ok Le problème posé sur ce sujet a été résolu.
avatar de stc
Membre
# Le 13/11/2008 à 18h35
Salut, je fais cette page: http://oxydshoes.com j'aimerais que l'image contenant le logo soit centrée verticalement. Sur mon 15" il y a une bar de défilement. J'aimerais que, quel que soit la résolution de l'écran, on voit le logo centré verticalement et en haut et en bas les 2 espace noirs (sans barre de défilement).
Merci de votre aide.
tchao.
avatar de Tony_
Administrateur
# Le 13/11/2008 à 21h54
Bonjour stc.

Je me suis rendu sur cette page et je me rend compte que l'image fait 946 pixels de large. Le problème c'est qu'il y a une bonne partie de cette image qui est de la même couleur que l'image de fond. En coupant une partie de cette image il te serait possible de gagner 100 pixels à gauche + 80 pixels environ à droite.
De mon coté, avec mon écran 17 pouces l'image est bien centré sans problème. J'ai redimensionné la fenêtre de mon navigateur pour simuler un écran 15 pouces et en effet l'image n'est pas centré à cause du bord gauche de cette image qui prend 100 pixels.

Je te suggère donc de supprimer les bords de l'image non nécessaire. Non seulement tu pourra corriger ton problème mais l'image sera également plus légère et tu pourra ainsi gagner en vitesse d'affichage (idéal pour les visiteurs qui n'ont pas une connexion internet rapide).

Cordialement. smiley
N'hésitez pas à consulter le dossier référencement. smiley
Sinon hors internet je suis développeur web PHP.
avatar de stc
Membre
# Le 14/11/2008 à 16h26
Heu t'as pas compris ce que je voulais dire funnycat je te parlais de centrer l'écran verticalement et non horizontalement. La j'ai mis dans le CSS de body un margin auto mais on ne vois pas de bande noire en haut!
Merci de m'aider.
avatar de Tony_
Administrateur
# Le 14/11/2008 à 18h16
Effectivement, je n'ai pas fais attention et j'ai cru que tu parlais de centrer horizontalement un élément.

Il faut savoir que l'HTML n'ai normalement pas un média où l'ont peut centrer horizontalement certains élément. Il est néanmoins possible de feinter un peu pour arriver à ses fins.

Au lieu de répondre à ta question directement ici, je vais te fournir un lien qui explique très bien ce que tu dois faire, puisqu'il te propose plusieurs solutions bien expliqué. Il faut se rendre sur l'aide de AlsaCreations pour consulter la question "comment centrer un élément verticalement". J'espère que cela va répondre à tes besoins.

EDIT:
Sinon, il y a un code relativement simple à utiliser découvert sur le site: CyberFormateur:
Code HTML:
Code:
<div class="centrer_photo">
<img src="photo.jpg" alt="" />
</div>

Code CSS:
Code:
.centrer_photo
{
position:absolute;
top: 50%;
margin-top: -XXpx; /* la moitié de la hauteur de l'image */
}


Cordialement.
N'hésitez pas à consulter le dossier référencement. smiley
Sinon hors internet je suis développeur web PHP.