28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer horizontalement un élément de largeur variable en abs

Bonjour,
Je cherche à savoir s'il existe une astuce pour centrer horizontalement un élément positionné en absolu indépendamment de sa largeur, le centre horizontal de cette boite devant être centré dans sa cellule parente.
Modifié par Hermann (24 Jan 2019 - 09:48)
Modérateur
Bonjour,

Un possibilité est d'utiliser un "left: 50%;" couplé avec un "transform: translateX(-50%);".

Exemple :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    	#container {
    		position: relative;
    		background: #ccf;
    		width: 300px;
    		margin: 0 auto;
    		height: 2em;
    	}
    	#content {
    		position: absolute;
    		background: #cfc;
    		height: 2em;
    		left: 50%;
    		top: 0;
    		transform: translateX(-50%);
    	}
    </style>
</head>
<body>
	<div id="container">
		<div id="content">
			Toto va à la plage.
		</div>
	</div>
</body>
</html>


Amicalement,
Modifié par parsimonhi (24 Jan 2019 - 11:02)
Ah ben oui ! Je n'avais même pas pensé à utiliser cette propriété. Merci ! Smiley smile
Modifié par Hermann (24 Jan 2019 - 11:31)
Sujet clos
Aller à