Je n'arrive pas à centrer une div.

Lecteur audio

Amaury a marqué ce sujet comme résolu.

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.

Normal, le position: absolute sur le parent le fait sortir du flux donc il n’occupe plus toute la largeur.

As-tu vraiment besoin de ce positionnement absolu ?

Si oui, la seule solution est de fixer la taille du conteneur et de bien le positionner :

.elvis {
	/* … */
	left: 50%;
	width: 18rem;
	margin-left: -9rem; /* La moitié de la largeur */
}

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 :) .

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte