28111 sujets

CSS et mise en forme, CSS3

Position absolute milieu page

Bonjour,

J'essaye de caler au milieu de ma page un bloc avec son texte par dessus en position absolute. Afin que le bloc s'adapte en fonction de la largeur du texte.
Mais je ne trouve pas la solution. Une solution svp ?

HTML

<section class="title-services">
	<div class="content-title">
		<h2> nos Services</h2>
	</div>
</section>


CSS / SASS

.title-services{
	padding-bottom: 150px; 
	margin: 0 auto;
       max-width: 286px;
		.content-title{
		     background: $back;
		    position: absolute;;
		    padding: 15px 29px 15px;
		    margin-top: -22px;
		}
				h2{
					position: relative;
					top: 46px;
				}
}
Bonjour,

Je ne suis pas un crack en CSS, mais voici ce que j'aurais plutôt fait :

CSS


.title-services {
background:green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding:10px;
}
.content-title {
	padding:10px;
	background-color:red;
}
h2 {
	margin:0;
	padding:10px;
	background-color:blue;
}


J'ai marqué les différentes couches avec des couleurs et en jouant sur le padding.

Est-ce que cela répond à tes attentes ?
Modifié par askhanir (22 Oct 2019 - 15:07)
Meilleure solution
tcdev a écrit :
Merci ! C'est parfait juste le top:50% qui est en trop


En trop ? Si on ne positionne pas à 50% de la hauteur le titre reste en haut de page... Non ?
Sujet clos
Aller à