Text-align universel ?

Le
romer
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;}

Ç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
Questions / Réponses high-tech
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
SAM
Le #22033761
Le 3/28/09 2:27 PM, Bernd a écrit :
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
?

Ç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">
</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
Le #22033751
On 28 mar, 18:29, SAM wrote:
Le 3/28/09 2:27 PM, Bernd a écrit :

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



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
romer
Le #22033741
SAM
> 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
?



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
Le #22033731
Le 3/28/09 9:22 PM, Bernd a écrit :

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
Le #22033721
Le 3/28/09 7:12 PM, kurtbosh a écrit :

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
romer
Le #22033711
SAM
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)
Le #22033591
On 28 mar, 15:27, (Bernd) wrote:
Hi,

Pour centrer une image et pour aller vite pour une période de test, j'a i
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



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
romer
Le #22033581
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



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.

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
Publicité
Poster une réponse
Anonyme