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.
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
B.M.
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.
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.
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
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
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
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
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é. 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. <BM@bm.invalid> 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é.
Je n'ai pas fait de test mais ça doit marcher.
Bien vu - ça marche impec et même avec qui vous savez... ;-)
--
A+
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.
Bernd a écrit :
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é. 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.
Bernd a écrit :
B.M. <BM@bm.invalid> 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é.
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.
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
B.M. wrote:
> 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
B.M. <BM@bm.invalid> wrote:
> 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+
