Je n'arrive pas à centrer une div.

Bonjour, Je n’arrive pas à centrer une piste audio. Le lecteur prend bien en compte le padding-top, mais pas le centrage. Il me semble portant avoir respecter les règles :/ Mon HTML :

div id="jaune"><div class="elvis">
<audio controls>
				<source src="./media/Elvis.mp3" type="audio/mp3">
						<source src="./media/Elvis.ogg" type="audio/ogg">
								<source src="./media/Elvis.wav" type="audio/wav">
											Your browser does not support the audio element.
					</audio></div><div class="pelvis"><p>ROCK</p></div>
 </div></div>

et mes CSS :

#jaune {
	height: 100vh!important;
	background-color: yellow;
	overflow:hidden;
	text-align: center;
			}
.elvis {
	margin: 0;
	text-align: center;
	padding-top: 30%;
	position: absolute;
	z-index: 99;
}
			
.pelvis {
	margin-top: 0;
	position: relative;

Merci pour votre aide et bonne journée, P.

Hello,

La propriété padding-top calcule le pourcentage par rapport à la largeur du parent (et non la hauteur).

Pour centrer verticalement le plus simple reste d’utiliser flexbox pour pas avoir à faire de calculs à la main.

Bonjour viky53, Merci du conseil, je vais me renseigner sur flexbox Mais dans le cas actuel, je cherche à centrer horizontalement la div :/ Merci et bonne journée

Dans ce cas, comme la balise audio est considéré comme inline, il suffit d’un text-align: center sur le parent.

Non, le problème est là… ça ne fonctionne pas

Pour la position absolute… pas le choix :/ mais ta solution marche à merveille !!!! Merci beaucoup

Pour info… pourquoi

width: 18rem;

???

Pour fixer une taille connue, sinon tu peux pas faire le margin-left qui correspond à la moitié pour centrer ton conteneur.

À toi de voir si tu veux l’ajuster, en pesant bien à mettre à jour la ligne du dessous le cas échéant

Mais le lecteur ne fait pas 18 rem de large ? Juste pour comprendre, car la formule est magique

Pas forcément, ça dépend de ton lecteur donc je ne connais pas les dimensions.

Mais ça force le conteneur a avoir une dimensions connue pour le positionner au centre. Et text-align permet ensuite de centrer le lecteur dans ce conteneur (qui est normalement plus grand).

Merci pour ces précisions Bon aprèm viki53

Le problème semble résolu, mais de façon plus générale, ce site est pas mal pour donner la bonne méthode (moderne) pour centrer (ou autres) en CSS plus ou moins n’importe quoi : howtocenterincss.com.

Si ça peut aider quelqu’un d’autre tombant sur ce sujet via une recherche .

Dommage qu’il soit pas disponible en HTTPS… et que le code généré soit avec du CSS inline

On est d’accord (le refaire ? hummmmm), mais les solutions restent bonnes tant qu’on les intègre dans un fichier CSS .

@Amaury des fois que t’aurais pas assez de projets sur le feu…

Cool Amaury, merci !