====== Centrer un bloc ======


Beaucoup de sites ont un contenu placé dans un gabarit fixe (non pas fluide) de [[http:/960.gs|960px]]. C'est ce que nous allons faire.

===== Les éléments =====

Créez un dossier **container** dans-lequel nous placerons les fichiers de cet exercice.

Créez une page HTML qui contient dans son body une div nommée container
<code html>
<div id="container">
	<h1>Ma page</h1>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
	enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</code>


A votre fichier HTML, dans la partie **head** attachez-y un fichier css distant avec un comme 
<code html>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" charset="utf-8" />
</code>

Dans le fichier css (ici screen.css) spécifiez
<code css>
body{
	background-color:#f2f2f2;
}
#container{
	background-color:#fff;
	width:960px;
}
</code>


===== Centrez =====

Dans notre cas, nous allons centrer le bloc **#container** par rapport au bloc **body**.

Pour centrer un bloc A dans un bloc B, il faut :

que tout ce qui est dans le bloc B soit centré, pour ce faire, utilisez
<code css>
text-align:center;
</code>

Pour que cela fonctionne sur tous les navigateurs (IE6+), il faut que le bloc A soit en marges souples (auto), 
<code css>
margin-left:auto;
margin-right:auto;
</code>

===== Finitions =====

Appliquez des typos élégantes sur le contenu, veillez à ce que le texte soient ferrés à gauche, etc.