28172 sujets

CSS et mise en forme, CSS3

Centrer la balise image

Bonjour

Je souhaiterais centrer la balise <img> dans firefox.
dans IE je n'ai pas de problèmes.
Des images de toutes tailles apparaîtrons à cet emplacement.
Merci d'avance

<style type="text/css">
<!--
img{text-align:center;display: block;}
-->
</style>
</head>
<body>
<div><img src="image.png"  /></div>


@+
Administrateur
Hello,

Attention à la confusion : "text-align" s'applique au contenu dans l'élément.
En clair ton code dit ceci : je veux centrer le contenu de ma balise <img> (problème : la balise img n'a pas de contenu)
En bref, c'est à la balise <div> qu'il faut appliquer cette propriété... mais attention car elle ne s'applique qu'aux éléments en-ligne or tu appliques un "display: block" à l'image Smiley ohwell
pour centrer une image, ce n'est pas l'image qu'il faut centrer.
Il faut mettre l'image dans un conteneur (div) et mettre text:align à la div.

Attention, si tu mets display:block; sur ton image, elle sera à gauche tout de même.

Le fait que IE fasse ce que tu veux est un bug de sa part....


[edit=Raphael a été plus rapide que moi, ]désolé si je répète ce qu'il dit[/edit]
Modifié par Sylvain (11 Sep 2005 - 16:37)
Re

Je sais bien tout ce dont vous me parlez, j'ai mal formulé ma question,
je ne sais pas comment la formuler
Ce que j'aimerais en fait, c'est avoir un bloc centré qui épouse l'image
automatiquement et non pas un bloc qui s'étale sur toute la largeur.

Merci pour votre patience
Administrateur
Michel a écrit :
Ce que j'aimerais en fait, c'est avoir un bloc centré qui épouse l'image
automatiquement et non pas un bloc qui s'étale sur toute la largeur.

OK, mais il faudrait encore quelques précisions :
- pourquoi un bloc pour épouser l'image ? (l'image en elle-même ne suffit pas ?)
- connais-tu la taille de l'image ?
c'est justement parce que l'image suffisait, que j'ai tenté d'influer sur
le bloc <img>
j'ai bien saisis la question sur la taille de l'image justement pas de taille.
Plusieurs images de toutes tailles par l'intermédiaire de PHP s'inscriront
à cet endroit.<img src="ici" />.

pourquoi l'importance d'épouser la forme ?
ceci afin de pouvoir me servir graphiquement de cet entourage
et vouloir influer sur le border du bloc et non pas sur le border de l'image.

Merci
Administrateur
Hmm tu commences par dire que l'image se suffit à elle-même, puis tu expliques qu'il te faut quand-même un bloc autour Smiley ohwell

Bon on va don ctraiter les deux sujets :
1- si l'image se suffit, il faut alors simplement la centrer en appliquant un text-align center à son conteneur
2- s'il faut un bloc qui s'adapte automatiquement à sa taille, il n'existe qu'un seul moyen de le faire : déclarer ce bloc en position absolue, ou en position flottante (ce sont à ma connaissance les seuls moyens d'adapter un bloc aux dimensions de son ceontenu). Le problème est que cette contrainte ne va pas faciliter le centrage de ce bloc+image Smiley ohwell
Merci pour ta patience

Si l'on regarde attentivement le code de ma première question
on voit ceci <div><img src="image.png" /></div>.
mon intention a toujours été d'utiliser un bloc autour de l'image.

la réponse est dans la suggestion ci-dessous et résoud presque ce que je cherche à faire.
<<Le problème est que cette contrainte ne va pas faciliter le centrage de ce bloc+image>>

Je ne suis pas très doué dans la formulation, je te le concède Smiley ohwell
Administrateur
Michel a écrit :
la réponse est dans la suggestion ci-dessous et résoud presque ce que je cherche à faire.
<<Le problème est que cette contrainte ne va pas faciliter le centrage de ce bloc+image>>

Disons qu'il est :
- facile de centrer un bloc non-dimensionné et non positionné (margin : auto)
- facile de centres un bloc positionné et dimensionné (marges négatives)

Mais il va certainement falloir bidouiller beaucoup pour centrer un bloc positionné (ou flottant) et non dimensionné Smiley decu
Modifié par Raphael (11 Sep 2005 - 16:15)
effectivement je bidouille depuis hier soir Smiley smile

Quelle autre piste me suggères-tu ou quelle alternative ?
Sinon tant pis pour moi , je ne vais pas me formaliser. Smiley cligne
Autre question (sans vouoir chercher à vous démoraliser): si maintenant on veux centrer verticalement ce bloc comment faire? (sachant que sa hauteur varie). Là, peu importe qu'il soit positionné ou non car de toute façon on ne peux pas appliquer un margin:auto vertical, non? Comment va t-on procéder alors? Bidouille? Smiley lol
Administrateur
mathmax a écrit :
Autre question (sans vouoir chercher à vous démoraliser): si maintenant on veux centrer verticalement ce bloc comment faire?
Comment va t-on procéder alors? Bidouille? Smiley lol

Le mieux serait d'éviter de polluer ce sujet puisque ta question n'a aucun rapport avec le titre du sujet et va donc être perdue dans le forum Smiley cligne
La réponse est : oui bidouille à cause d'IE qui ne reconnait pas le centrage vertical des éléments en CSS (vertical-align avec display table-cell).
Veuillez m'excuser. Je pensais que ma sujet était en rapport à avec la question: il s'agit bien d'un centrage de l'image mais verticalement...
Administrateur
mathmax a écrit :
Veuillez m'excuser. Je pensais que ma sujet était en rapport à avec la question: il s'agit bien d'un centrage de l'image mais verticalement...

Ta question parlait de bloc et non d'une image Smiley confus
Une image n'est pas un bloc justement donc je ne voyais pas le rapport avc le sujet initial Smiley ohwell
a écrit :
<style type="text/css">
<!--
img{text-align:center;display: block;}
-->
</style>
</head>
<body>
<div><img src="image.png" /></div>


Sans vouloir insister, il s'agissait bien là d'une image bloc, non? Puis ensuite on l'a mit dans un bloc div. C'est de ce bloc que je parlais:
<div><img src="image.png" /></div>.
Administrateur
mathmax a écrit :

Sans vouloir insister, il s'agissait bien là d'une image bloc, non?

La structure de l'élément HTML <img> est de type en-ligne, quels que soient les propriétés d'affichage (CSS) qu'on peut lui apporter.
Attribuer un "display block" permet d'avoir les comportements et affichages des éléments blocs, mais ça ne change rien à la structure globale.
Par exemple, une balise en-ligne <a> ne peut pas contenir de balises bloc, même si on donne un display block à cette balise <a>.
Modifié par Raphael (11 Sep 2005 - 21:56)
a écrit :
Par exemple, une balise en-ligne <a> ne peut pas contenir de balises bloc, même si on donne un display block à cette balise <a>

Merci. Je ne savais pas cela.
Sujet clos
Aller à