28182 sujets

CSS et mise en forme, CSS3

Bonsoir,
Je tente par tout les moyens de centrer une phrase.
Celle-ci se positionne bien, mais en redimensionnant la fenêtre, elle se décale sur la droite.
Il faut rafraichir la page pour revoir la phrase centrée.
Je vous donne les CSS :
.enba h2{
	position: absolute;
	bottom: 20px;
	left: 50%; /* position the left Edge of the element at the middle of the parent */
    transform: translateX(-50%);
	text-align: center !important;
	font-size:20px !important;

ainsi que le html :
	<div class="sl-slider" data-midnight="white">
				
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
<div class="bg-img enba bg-img-1">
	<h1>Titre</h1>
							<h2>Phrase</h2>
						</div>
			  </div>

						
			  </div>

Merci pour votre aide et bonne soirée,
P.
Modifié par PLGPPUR (05 Oct 2022 - 19:55)
salut
il manque une fermeture de div

<div class="sl-slider" data-midnight="white">
   <div class="sl-slide" data-orientation="vertical">
      <div class="sl-slide-inner">
         <div class="bg-img enba bg-img-1">
                <h1>Titre</h1>
                <h2>Phrase</h2>
         </div>
      </div>
   </div>
</div>
Bonsoir drphilgood,
Merci pour ta réponse.
Non, il ne manque pas une fermeture, c'est moi qui ai laissé "un parent" en trop Smiley confused qui se ferme beaucoup plus bas.
Le bon HTML est le suivant :
   <div class="sl-slide" data-orientation="vertical">
      <div class="sl-slide-inner">
         <div class="bg-img enba bg-img-1">
                <h1>Titre</h1>
                <h2>Phrase</h2>
         </div>
      </div>
   </div>

Désolé pour cette confusion, bonne soirée Smiley smile
P.
Bonjour Dave-Hiock,
Merci pour ta réponse.
Une position absolute pour avoir un bottom à 20px. Puis-je faire autrement ?
Merci et bonne journée,
P.
Dans ce cas quelque chose de plus « simple »
.enba h2{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size:20px;
}
Meilleure solution