28173 sujets

CSS et mise en forme, CSS3

Alignement d'une image dans un div ?

Bonjour,

Je n'arrive pas à aligner une image avec du texte. Comment puis-je faire stp ?

code css:

#bulle
{
	float:left;
	margin:5px ;
	border: 1px solid #999999;
}
	
#bulle a {
	text-align:center;
	text-decoration: none;
	display:table-cell;/* pour ff */
	display:inline-block;
	padding:5px;
}

img {
	border-width: 0;
	border-style: none;
	display:block;
}


code html:

<div id="bulle">
<a href="#"><img ... />texte</a>
</div>


Sous IE l'image et le texte sont alignés mais pas sur les autres navigateurs.

Résultat souhaité, obtenu sur IE:
http://perso.orange.fr/photosdestef/ie.JPG


Résultat sous Firefox non souhaité :
http://perso.orange.fr/photosdestef/firefox.JPG


++
Modifié par Chypster (10 Aug 2007 - 18:34)
Felipe a écrit :
Bonjour,

est-ce que tu veux aligner horizontalement ou verticalement? (le texte est-il à côté de l'image ou bien dessous?)
Le cas courant est dans cet article de FAQ: http://forum.alsacreations.com/faq/faq-5-Comment-aligner-verticalement-une-image-et-une-ligne-de-texte-.html
mais comme je vois des display: block; je suis pas sûr de répondre à ta question ... (un exemple en ligne ...)


ghost a écrit :
Bonjour,

Aligné comment? le texte à droite de l'image ? un petit schéma?


Oula oula bonsoir tout le monde,

Désolé pour le manque de précision, je devais être un peu distrait. Alors oui je veux aligner horizontalement le texte et l'image au centre du cadre avec le texte en-dessous.

Pas d'éxemple en ligne car c'est un espace sécurisé.

++
Modifié par Chypster (09 Aug 2007 - 22:08)
Bonjour,

Il ne faut désespérer.
Une piste. Essaye
#bulle {
	float:left;
	margin:5px ;
	border: 1px solid #999999;
	text-align:center;
      }
#bulle a {
	text-decoration: none;
	display:table-cell;/* pour ff */
	display:inline-block;
	padding:5px;
      }
Et tu dis
a écrit :
avec le texte en-dessous
Alors, comment va-t-on à la ligne en HTML ?
  
Modifié par Gihef (10 Aug 2007 - 16:50)
Ok Gihef, je vais essayer ce que tu m'as dit.
Bon en essayant d'être le plus clair possible.

Sur l'image dans mon message, vous voyez 4 cadres contenant une image et du texte. J'ai fait en sorte que le contenu de chaque cadre soit cliquable, ça pas de souci. Mon problème se situe sous Firefox et non IE, Firefox au lieu de me centrer l'image et le texte qui doit se situer en-dessous de l'image m'aligne le tout à gauche. Je voudrais savoir d'où ça provient ?

voilà.
Si il y avait moyen que je n'utilise pas <br /> pour placer mon texte en dessous de l'image ça serait mieux, j'aime bien chipoter Smiley cligne .

Merci à tous pour votre aide !!!
Modifié par Chypster (10 Aug 2007 - 17:18)
L'image et le texte sont en-ligne, l'un à côté de l'autre par défaut.
Si tu ne veux pas de <br /> (pourquoi pas ?), réduit la taille des “cadres” à la largeur des images et le texte devra aller à la ligne.

“l'image dans mon message” ???
 
Modifié par Gihef (10 Aug 2007 - 17:29)
Re,

Sinon tu places ton image en display: block et ton texte dans un <p> auquel tu définis un width égal à la largeur de l'image et affublé d'un text-align: center.
Bon j'ai ajouté deux aperçus en premier post.
Pourquoi sous Firefox ça ne m'aligne pas l'image au centre ???

Telle est la question mon cher Watson !

J'ai essayé ce que vous m'avez dit, rien n'y fait apparement.
Modifié par Chypster (10 Aug 2007 - 18:37)
Re,

Une solution (ça dépendra de ton contexte Smiley cligne )


     <style>
* {
margin:0;padding:0;
}

#conteneur{
width: 150px;
border: 1px solid black;

}

img{
display: block;
margin: auto;
}

p{
width: 150px;
text-align: center;

}
	 </style>
</head>
<body>
  <div id="conteneur">
<img src="image.jpg" alt="" />
<p> je suis un texte</p>

</div>
	</body>
Merci pour ta solution mais elle ne marche pas dans le contexte de ma page, je me retrouve avec une marge à droite qui me décale tout.

Toujours au même point hélas !
Re,

Une autre piste avec comme préambule width des images variable.


  <style type="text/css">
.bulle{
	float:left;
	margin-right: 10px;
}

.bulle a {
	border: 1px solid #999999;
	text-align:center;
	text-decoration: none;
	color: #000;
	display:block;
	padding:5px;
}

img {
	border-width: 0;
	border-style: none;
	display:block;
	overflow: hidden;
	margin: 5px auto;
}
	 </style>
<!--[if IE ]>
  <style type="text/css">
img {
margin: 5px ;
}
</style>
<! endif -->
</head>
<body>
<div class="bulle">
<a href="#"><img src="img1.jpg" alt="" /><span> texte ...</span></a>
</div>
<div class="bulle">
<a href="#"><img src="img2.jpg" alt="" /><span> ceci est un texte bien bien long</span></a>
</div>
</body>
Sujet clos
Aller à