Centrer image

Le
romer
Hi,

Imaginons un site simple à pleurer de 880px de large avec bannière, menu
à gauche (largeur en em) et page à droite contenant le texte dont on
ignore la largeur exacte.

Comme centrer une image dans la page avec une classe css.

Naturellement on peut imbriquer l'image dans un <div class"centrage"> et
centrer ce div avec #centrage{text-align:center;}

Mais je prèfère agir directement sur une classe image et n'y parviens
point. J'ai tenté avec des positions absolute et relative sansa succès.

Merci.
--
A+

Romer
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
B.M.
Le #22051451
Bernd a écrit :
Hi,

Imaginons un site simple à pleurer de 880px de large avec bannière, menu
à gauche (largeur en em) et page à droite contenant le texte dont on
ignore la largeur exacte.

Comme centrer une image dans la page avec une classe css.

Naturellement on peut imbriquer l'image dans un <div class"centrage"> et
centrer ce div avec #centrage{text-align:center;}

Mais je prèfère agir directement sur une classe image et n'y parviens
point. J'ai tenté avec des positions absolute et relative sansa succès.

Merci.



Une image c'est un élément inline, donc en principe la seule solution
c'est de l'inclure dans un élément block ayant la propriété text-align
center comme vous l'avez signalé... Sauf si vous transformez l'image en
block en lui attribuant la propriété display: block, il ne rsete plus
alors qu'à procéder de façon classique avec un block : margin-left:
auto; margin-right: auto. Vous mettez le tout dans une class et le tour
est joué.
Je n'ai pas fait de test mais ça doit marcher.
--
B. M.
CrazyCat
Le #22051431
B.M. wrote:
Une image c'est un élément inline, donc en principe la seule solution
c'est de l'inclure dans un élément block ayant la propriété text-align
center comme vous l'avez signalé... Sauf si vous transformez l'image en
block en lui attribuant la propriété display: block, il ne rsete plus
alors qu'à procéder de façon classique avec un block : margin-left:
auto; margin-right: auto. Vous mettez le tout dans une class et le tour
est joué.



En toute logique, la première solution est la bonne (mettre l'image dans
un div), tout simplement parce que "centrée" n'est pas une propriété de
l'image mais bien du contenant.


--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces : http://www.g33k-zone.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
romer
Le #22051421
B.M.
Une image c'est un élément inline, donc en principe la seule solution
c'est de l'inclure dans un élément block ayant la propriété text-align
center comme vous l'avez signalé... Sauf si vous transformez l'image en
block en lui attribuant la propriété display: block, il ne rsete plus
alors qu'à procéder de façon classique avec un block : margin-left:
auto; margin-right: auto. Vous mettez le tout dans une class et le tour
est joué.
Je n'ai pas fait de test mais ça doit marcher.



Bien vu - ça marche impec et même avec qui vous savez... ;-)
--
A+

Romer
B.M.
Le #22051411
Bernd a écrit :
B.M.
Une image c'est un élément inline, donc en principe la seule solution
c'est de l'inclure dans un élément block ayant la propriété text-align
center comme vous l'avez signalé... Sauf si vous transformez l'image en
block en lui attribuant la propriété display: block, il ne rsete plus
alors qu'à procéder de façon classique avec un block : margin-left:
auto; margin-right: auto. Vous mettez le tout dans une class et le tour
est joué.
Je n'ai pas fait de test mais ça doit marcher.



Bien vu - ça marche impec et même avec qui vous savez... ;-)



Petite précision: pour que ça fonctionne avec IE6 il faut avoir un
doctype html 4.01 strict ou xhtml (strict ou non).
--
B. M.
romer
Le #22051401
B.M.
> Bien vu - ça marche impec et même avec qui vous savez... ;-)

Petite précision: pour que ça fonctionne avec IE6 il faut avoir un
doctype html 4.01 strict ou xhtml (strict ou non).



Exact - que IE6 ne se mette pas en mode quirk.
--
A+

Romer
Publicité
Poster une réponse
Anonyme