Discussion :

[nenette95]

Bonjour à tous,
J'aimerais centrer du texte par rapport à une image mais j'ai du mal à concevoir la css pour cela.
J'imagine que je doit utiliser un positionnement relative (par rapport à l'image) mais je ne vois pas bien comment faire.
J'ai mis mon texte dans un label car je souhaite le modifier en JS après.
Voila le code que j'ai pour le moment:
dans le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div#LeFond {
	position : absolute;
	top : 78px;
	left : 9px;
}
div#TitreCarte {
	position : absolute;
	top : 20px;
	text-align : center;
}
.StyleTitre {
	font-size : 26px;
	font-weight : bold;
	font-family : cursive;
	text-align : center;
}

Dans le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id = "TitreCarte">
	<label id="Titredoc" class="StyleTitre"></label>
</div>
<div id = "LeFond">
	<img src="MaCarte.png" >
</div>

Pourriez m'aider s'il vous plait.

Cordialement

[rodolphebrd]

Bonjour,

n'êtes-vous pas en train de vous compliquer la tâche ?

J'ai mis mon texte dans un label car je souhaite le modifier en JS après.

Je ne vois pas l'intérêt

[rodolphebrd]

Une solution simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.box {
	width: 200px;
	text-align: center;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="box">
  <p>legende de l'image</p>
  <div id = "LeFond"> <img src="http://lorempixel.com/100/100/sports" > </div>
</div>

[nenette95]

Bonjour rodolphebrd,
Merci pour cette rapide réponse.
Avec votre code le texte sera centrer par rapport à l'écran et non par rapport à l'image?
L'image n'ai pas forcément centrer par rapport à l'écran, mais je veux que le texte soit centrer par rapport à l'image et c'est la que c'est un peu flou pour moi...
(je ne sais pas si je suis très claire )

Cordialement

[rodolphebrd]

Désolé, ce n'était pas clair dès le début c'est pourquoi je vous ai donné un exemple basique. Dans l'exemple que je vous donne l'image n'est pas centrée par rapport à l'écran mais par rapport au conteneur (box).

Il vous faudra bien un conteneur ? Si non, donnez plus d'informations ou un exemple en ligne.

[nenette95]

Donc vous aviez raison, en utilisant un conteneur de la taille de mon image (+le positionnement), mon texte reste toujours centré sur mon image. Je m'en souviendrais.

MERCI BEAUCOUP