Superposer du texte sur des cercles

**FloCAD** · 28/04/2015, 15h12

Bonjour,

Je souhaiterai mettre du texte centré dans plusieurs cercles disposés où je le souhaite (pas alignés côte à côte ou autre) que je créé en CSS mais je n'arrive pas à centrer ce texte correctement dans mon cercle en plaçant ces mêmes cercles aux endroits que je souhaite...

Mon HTML :

Code html :

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

1
2
3
4
5
6
<div id="crcl_jaune">
    <div id="txt_crcl_jaune">
        <h1>Présentation de <br /><strong>MOI</strong></h1>
        <p>Salut tout le monde !<p>
    </div>
</div>

Mon 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
17
18
 
div#crcl_jaune{
    position: absolute;
    background: rgb(250,190,60);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    top: 25%;
    left: 5%;
    border: 1px rgba(255,255,255,0.7) solid;
}
 
div#txt_crcl_jaune{
    position: absolute;
    color: white;
    text-align: center;
 
}

Merci d'avance pour votre aide ! =)

**Bovino** · 28/04/2015, 15h15

#txt_crcl_jaune va prendre uniquement la largeur dont il a besoin, centrer son contenu n'a pas vraiment de sens. C'est sur #crcl_jaune qu'il faut placer le text-align.

**FloCAD** · 28/04/2015, 15h21

Ok, mais du coup est-ce que j'ai réellement besoin d'avoir deux div, une pour le cercle et l'autre pour le texte ou est-ce que ça serait mieux de ne mettre qu'une seule div par cercle que je veux placer ?

**Bovino** · 28/04/2015, 15h23

J'imagine que si tu testes, tu auras rapidement la réponse...

**FloCAD** · 28/04/2015, 15h36

Pas vraiment, je ne serais pas ici sinon malheureusement...

Je m'explique plus clairement avec un code de démo :
Mon HTML :

Code html :

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
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
 
<body>
  <div id="crcl_jaune">
    <h1>Ma présentation</h1>
    <p>blablablablablablabla blablablablablablabla blablablablablablabla</p>
  </div>
  <div id="crcl_bleu">
    <h1>coucou</h1>
  </div>
 
</body>
</html>

Mon 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#crcl_jaune{
	position:relative;
	top: 100px;
	left: 70px;
	display:inline-block;
	vertical-align:middle;
	background: rgb(250,190,60);
	border-radius: 50%;
	width: 220px;
	height: 220px;
	line-height:1em;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	text-align: center;
	z-index: 0;
}
 
#crcl_bleu{
	position:relative;
	top: 200px;
	left: -2px;
	display:inline-block;
	vertical-align:middle;
	background: rgb(65,190,238);
	border-radius: 50%;
	width: 150px;
	height: 150px;
	line-height:1em;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	text-align: center;
	z-index: -1;
}

Mon problème est que soit, j'utilise une position relative mais je perds le vertical-align, soit j'utilise une position absolue et rien ne bouge, ne me permettant pas de placer mes cercles où je le souhaite...

Mon objectif est que cela ressemble à ça : http://jsbin.com/pahubiwufa/1/edit mais avec le texte centré dans le cercle !

Merci d'avance =)

Invité · 28/04/2015, 16h41

Bonjour,

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav id="crcl_menu">
    <div id="crcl_jaune">
    <div>
      <h1>Ma présentation</h1>
      <p>blablablablablablabla blablablablablablabla blablablablablablabla</p>
    </div>
    </div>
    <div id="crcl_bleu">
     <div>
     <h1>Coucou la praline</h1>
    </div>
    </div>
</nav>

Code CSS :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#crcl_menu{
	position:relative;
	margin-top: 50px;
	margin-left: 20%;
}
#crcl_jaune{
	position:absolute;
	display:table;
	top: 0;
	left: 0;
	background: rgb(250,190,60);
	border-radius: 50%;
	width: 220px;
	height: 220px;
	line-height:1em;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	text-align: center;
	z-index: 0;
}
#crcl_bleu {
	position:absolute;
	display:table;
	top: 130px;
	left: 180px;
	background: rgb(65,190,238);
	border-radius: 50%;
	width: 150px;
	height: 150px;
	border: 2px solid rgba(255,255,255,0.7);
	color: rgb(255, 255, 255);
	z-index: -1;
}
#crcl_jaune > div, #crcl_bleu > div {
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
 }

Superposer du texte sur des cercles [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager