bonjour,

je suis en train de développer une petite interface et je fais face à un probleme de "design". Je me suis inspiré d'une des pubs d'Open Classroom et donc ai essayé de copier une partie de la source... mais probleme mon texte reste en haut du bloque. J'ai donc compris que align-self: center; pouvais centrer mon texte mais finalement la fonction ne joue aucun role...  Je vous montre ce que ca donne:

la partie CSS

.firstbulle {
	color: #00838F;
	background-color: #84E5F2;
	opacity: 0.5;

	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.5rem;
	text-align: center;
	align-self: center;

	width: 132px;
	height: 132px;
	padding: 8px;

	border-radius: 50%;

	display: block;
	position: absolute;
	top: 102px;
	right: 340px;
}

.secondbulle {

	background-color: #00838F;
	opacity: 0.7;
	
	text-align: center;

	width: 132px;
	height: 132px;
	padding: 30px;
	
	border-radius: 50%;

	display: block;
	position: absolute;
	top: 190px;
	right: 430px;
}

et voila la partie HTML:

<div class="firstbulle">
<span class="textPB" >Reprenez de <br>l'énergie</span>
</div>

<div class="secondbulle">
<span class="textSB">100 %<br>Frais</span>
</div>

et voila ce que ca me donne sur la page:

Peut etre y a-t-il une erreur dans le code (surement) sinon je ne vois pas... Un peu d'aide?

merci!

Bonjour,

align-self: center ne fonctionne que dans un contexte flexbox.

merci Lamecarlate mais comment dois-je faire alors?

Bin tu donnes display: flex à tes bulles, je suppose. Je viens de tester : il faut en outre remplacer align-self (qui concerne l'élément lui-même) par align-items (qui concerne les enfants, puisque c'est le texte dans la bulle que tu veux centrer). Et ajouter justify-content: center, pour centrer le bloc interne horizontalement (en plus du text-align: center).

parfait tout fonctionne comme je le souhaite! Un grand merci!

Super Bonne continuation !

flexbox exelent