Probleme centrage d'un texte sous une image

Bonjour

je suis débutante et je rame depuis plusieurs heures sur les différents forums et autres sites de tuto sans réussir à résoudre mon problème. Je cherche "simplement" à centrer du texte sous une image...

Voici ce que je souhaite obtenir => centrer le chiffre en % sous l'image de la roue


extrait de code html (concerne le premier carré)

<div class="container">
<section class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2 ">
<div class="row block-section4 centrage">
<div class="col-sm-12 " style="background-color: #f7a41a">
<img src="img/roue-section4.png" class="image-roue image-responsive" />
<P class="txt-section4">95% </P>
<p class="txt-section4">BRANDING</p>
</div>	
</div>
</section>
</div>

extrait de code css

.image-roue {
  width: 50%;
  margin-top: 10%;
}

.block-section4 {
  height: 100%;

}

.txt-section4 {
  color: #ffffff;
  font-size: 18px;
}

.centrage {
  width: 100%;
  margin: auto;
  padding-top: 10px;
  text-align: center;
}

j'ai tenté les position absolute, relative, les z-index, sans succès ... c'est pour cette raison que mon code css ne les mentionne pas, qu'elle y soit ou pas ça ne change rien !
j'obtiens ça :



Qu'est ce que je rate ?
help ?

Merci
Modifié par AnneLaureC (02 Apr 2019 - 12:07)

Un truc du genre : https://jsfiddle.net/YiuJia/y5vck3q8/

Oui on s'approche du résultat :


je ne comprends pas pourquoi l'image ne se maintient pas au centre ??

<div class="col-sm-2 ">
	<div class="row block-section4 centrage">
		<div class="col-sm-12" style="background-color: #f7a41a">
			<div style="position: relative;text-align: center;">
				<img src="img/roue-section4.png" class="image-roue image-responsive" />
				<p class="txt-section4" style="position: absolute;top: 50%;left: 50%">95% </p>
			</div>
		</div>	
	</div>
</div>

Merci !!

finalement en modifiant un peu les pourcentages de la position du texte je suis arrivée au résultat voulu

Merci Yiujia !

Bonjour,
moi j'aurai plutôt fait une utilisation du display: flex.
https://jsfiddle.net/Lza5oht3/1/

AnneLaureC a écrit :
finalement en modifiant un peu les pourcentages de la position du texte je suis arrivée au résultat voulu

Merci Yiujia !

Le souci c'est qu'en bricolant avec les pourcentages cela risque de ne plus être calé si la typo change pour x ou y raisons.

Dans ton code précédent ton 95% n'est pas au centre car il est positionné par rapport au coin supérieur gauche de ton 95%.

Un solution simple pour centrer est d'ajouter en plus sur ton élément en position absolute :

transform: translate(-50%, -50%);

http://jsfiddle.net/6xo11zwv/2/

Ou la solution de Raphi, que je ne connaissais pas, avec flex-box c'est très bien aussi.