Text-align universel ?
Bernd
Pour centrer une image et pour aller vite pour une période de test, j'ai
fait ceci en CSS :
img {text-align:center;}
Ça marche avec IE (cela je le savais) mais j'ignorais que ça marchait
aussi avec les autres navigateurs pourtant plus conformes au
recommandations et standards du wc3.
Comment une propriété "text" peut-elle s'appliquer donc à une image si
on veut être un tant soit peu conséquent ? Que IE ignore cela, on s'y
attend mais quid des autres navigateurs ?
Comment expliquer cela ?
--
A+
Romer
SAM
> Hi,
>
> Pour centrer une image et pour aller vite pour une période de test, j'ai
> fait ceci en CSS :
>
> img {text-align:center;}
Heu ? Tu es sûr ?
Ce n'est pas
p { text-align: center }
et
<p><img src="1.jpg" alt=""></p>
?
> Ça marche avec IE (cela je le savais) mais j'ignorais que ça marchait
> aussi avec les autres navigateurs pourtant plus conformes au
> recommandations et standards du wc3.
Pas ce que tu donnes avec mon Fx
ni avec mon Safari
ni avec mon Opera
> Comment une propriété "text" peut-elle s'appliquer donc à une image si
> on veut être un tant soit peu conséquent ? Que IE ignore cela, on s'y
> attend mais quid des autres navigateurs ?
> Comment expliquer cela ?
Heu ... je ne sais si ça fonctionne directement sur une image ou bien
s'il ne faut pas que ce soit son parent qui ait cette règle ?
car chez moi ce qui fonctionne est bien :
<div style="text-align: center">
<img src="1.gif" alt="">
</div>
Il est connu que les nouveaux brouteurs se sont pliés à cette fantaisie
à la M$ (il faut bien aussi essayer d'être compatible avec le major, au
moins pour certains trucs, sous peine de ne vraiment plus être utilisé).
Maintenant, je ne sais si c'est entré dans les "standards" ...
ni si prévu de l'être.
Ceci étant, il parait que les images c'est du type inline (comme le
texte) il n'est donc pas si aberrant de pouvoir centrer une image par ce
moyen.
--
sm
kurtbosh
wrote:
> Le 3/28/09 2:27 PM, Bernd a écrit :
>
> texte) il n'est donc pas si aberrant de pouvoir centrer une image par ce
> moyen.
>
> --
> sm
Oui, c'est ce que je viens de lire dans le document que tu m'as cité
(ta traduction).
Moi pour ne pas m'embêter j'ai osé créer :
.center {text-align: center; width: 100%; margin-left: auto; margin-
right: auto}
C'est bien pratique aussi !
Guy
Bernd
> > Pour centrer une image et pour aller vite pour une période de test, j'ai
> > fait ceci en CSS :
> >
> > img {text-align:center;}
>
> Heu ? Tu es sûr ?
J'ai bugé ! Mille excuses. En effet ça ne marche pas.
>
> Ce n'est pas
> p { text-align: center }
> et
> <p><img src="1.jpg" alt=""></p>
> ?
Oui la même chose en fait - au lieu d'un <p> j'ai utilisé un <div>
En centrant la boite, on centre évidemment son contenu.
--
A+
Romer
SAM
>
> En centrant la boite, on centre évidemment son contenu.
Je vais être pointilleux pour une fois mais on ne centre pas une *boite*
par un 'text-align: center;' mais bien son *contenu*. ^^^^^^
C'est *text*align et non *box*align ;-)
Pour centrer une boite on visera ses marges : 'margin: auto;'
(il me semble bien que cet idiot de IE6 comprend la chose)
(à se demander pourquoi il nous a em...é avec ce text-align qui
s'intéresse aussi aux image, mébon)
Comme tout le monde a bien lu les recommandations du W3C à propos des
héritages, personne ne sera surpris qu'un div au contenu centré, aura
*tout* le contenu centré, et y compris le contenu de ses sous-divs.
Ce n'est donc pas la peine de répéter 15 fois text-align: center;
si ça concerne 15 enfants ou petits-enfants d'un parent qui a cette règle.
--
sm
SAM
>
> Moi pour ne pas m'embêter j'ai osé créer :
>
> .center {text-align: center; width: 100%; margin-left: auto; margin-
> right: auto}
>
> C'est bien pratique aussi !
Ça dépend ... ça dépend ...
car là tu centres et le contenu et le conteneur
de plus comme tu le forces en pleine largeur ... le margin ... ma foi
... il n'aura pas beaucoup de travail ;-)
Outre cette petite contradiction width/margin,
je ne suis pas convaincu de l'utilité de ce double centrage
qu'on aura très peu l'occasion d'utiliser.
Maintenant si c'est une classe qui vise à contrebalancer d'autres classes
... peut-être ...
(encore que : il faut peut-être alors revoir l'ensemble de la copie ?)
div { border: 1px solid; margin: 10px auto; }
h2 { color: blue }
.un { margin: 10px 50px }
.deux { text-align: right }
.centreur { text-align: center; margin: 10px auto; width: 100% }
<div class="un"><h2>un</h2>margé droite et gauche de 50 pixels</div>
<div class="deux"><h2>deux</h2>contenu à droite</div>
<div class="un deux"><h2>un + deux</h2>
margé droite et gauche de 50 pixels, contenu à droite</div>
<div class="un centreur"><h2>un + centreur</h2>
margé droite et gauche de 0 pixels et contenu centré</div>
<div class="deux centreur"><h2>deux + centreur</h2>
margé droite et gauche de 0 pixels et contenu centré</div>
<div class="deux centreur un"><h2>deux + centreur +un</h2>
margé droite et gauche de 0 pixels et contenu centré</div>
à essayer aussi avec la feuille de styles (qui parait identique) :
div { border: 1px solid; margin: 10px auto; }
h2 { color: blue }
.centrer { text-align: center; margin: 10px auto; width: 100% }
.un { margin: 10px 50px }
.deux { text-align: right }
où l'on voit que le fameux 'centreur' s'en va à vau l'eau
et de belle manière !
Chercher sur yoyodesign le pourquoi du comment.
(si, si, y a une petite ligne qui le dit)(je sais plus où)
--
sm
Bernd
> Pour centrer une boite on visera ses marges : 'margin: auto;'
>
> (il me semble bien que cet idiot de IE6 comprend la chose)
Je crois aussi qu'il la comprend - ce dont je suis sûr c'est que IE 5.5
ne la comprend pas. Mais qui a encore cet silex préhistorique ?
> Comme tout le monde a bien lu les recommandations du W3C à propos des
> héritages, personne ne sera surpris qu'un div au contenu centré, aura
> *tout* le contenu centré, et y compris le contenu de ses sous-divs.
...si une armoire est centré au milieu d'une pièce, tout son contenu le
sera aussi ;-))
--
A+
Romer
bruno bichet (br1o)
La propriété text-align s'applique aux éléments en ligne, dont
l'élément img fait partie. C'est à priori un comportement normal et
standard
Bernd
> La propriété text-align s'applique aux éléments en ligne, dont
> l'élément img fait partie. C'est à priori un comportement normal et
> standard
img{text-align;center;}
Ce fut en fait une erreur de mémoire - ça ne marche pas ainsi dans IE et
les autres navigateurs.
Il faut comme on s'y attend placer l'image dans une boite qui sera
elle-même centrée et là pas de pb.
<div class="centrons"><img src="image.gif"></div>
et
.centrons{text-align:center;}
Mais il demeure que d'un point de vue sémantique ce t"ext-align" ne me
satisfait pas.
object-align ou quelque chose ressemblant m'eût paru davantage adéquat.
--
A+
Romer