code html :
<! DOCTYPE html>
<html>
<head>
<title>Wrapper</title>
</head>
<body>
<div id="wrapper">
<h1>Bienvenue dans mon site</h1>
<br />
<div id="contenuprincipal">
<h2>L'actualité du jour</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus</p>
</div>
</body>
</html>
<head>
<title>Wrapper</title>
</head>
<body>
<div id="wrapper">
<h1>Bienvenue dans mon site</h1>
<br />
<div id="contenuprincipal">
<h2>L'actualité du jour</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus</p>
</div>
</body>
</html>
le code css :
#wrapper{
position : relative;
margin-left: auto;
margin-right:auo;
width : 80%;
text-align : center;
}
Dans ce cas ici il ne faut absolument pas oublier de définir une largeur de page (width) sinon il y aura pas de centrage des éléments. Si vous positionnez en absolue ça ne fonctionnera pas non plus.
Aucun commentaire:
Enregistrer un commentaire