26748 sujets

CSS et mise en forme, CSS3

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