Cliquez sur les exemples de code CSS pour voir le résultat appliqué à la colonne de droite ou l'un de ses éléments contenus.
Pour l'alignement des textes, voir le chapitre CSS 2 > Les textes.
|
Centrer en utilisant le calcul automatique des marges
|
<style type="text/css">
#div1 {
width: 50%;
background-color: #C3D9FF;
padding: 15px;
margin-right: auto;
margin-left: auto;
}
</style>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse urna enim, posuere ut porttitor sit amet,
eleifend quis leo. Aenean semper sapien quis mi mattis
at venenatis est feugiat.
</div>
|
|
Aligner à droite en utilisant une position absolue
|
<style type="text/css">
#div2 {
width: 50%;
background-color: #C3D9FF;
padding: 15px;
position: absolute;
right: 0;
}
</style>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse urna enim, posuere ut porttitor sit amet,
eleifend quis leo. Aenean semper sapien quis mi mattis
at venenatis est feugiat.
</div>
|
|
Aligner à droite en utilisant la propriété float
|
<style type="text/css">
#div3 {
width: 50%;
background-color: #C3D9FF;
padding: 15px;
float: right;
}
</style>
<div id="div3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse urna enim, posuere ut porttitor sit amet,
eleifend quis leo. Aenean semper sapien quis mi mattis
at venenatis est feugiat.
</div>
|
Place à la pratique :
THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA
