Positionnement de blocs et de texte avec les CSS

Positionner correctement les différents éléments de la page n’est pas forcément aisé. Dans cet article on va voir comment aligner, centrer son texte, ses blocs, etc. un bon petit mémento.

I. Blocs

1. display

display « block » (et «inline-block») permet de donner une largeur (width) et une hauteur (height) à une boite.

  • block : par défaut occupe toute la largeur du conteneur.
  • inline-block : par défaut la largeur s’adapte au contenu, chaque élément s’ajoute à la droite du précédent sur une même ligne. Attention toutefois aux espaces blancs ! Concrètement on utilisera rarement inline-block.

display « inline » permet de positionner du contenu sur une ligne, comme du texte, mais on n’a pas de hauteur ni de largeur.

2. float

Permet de positionner un bloc à gauche ou à droite.

  • left
  • right
  • none

Attention un conteneur ayant des éléments flottants risque d’avoir une hauteur de 0 px. Pour éviter cela on utilise un « clearfix » (sur le conteneur). On peut créer une classe ou appliquer cela directement au conteneur.


.clearfix:before,
.clearfix:after {
     content: '';
     display: table;
}
        
.clearfix:after {
    clear: both;
}

3. Centrer un bloc horizontalement

Donner une largeur « width » (ou une largeur minimum « min-width » ou maximum « max-width« ) + margin 0 auto


.container {
    width: 1200px;
    margin: 0 auto;
}

4. Placer un bloc à gauche ou à droite horizontalement

Utiliser « float » (left ou right) sur un bloc.
Pour faire plus complet on pourrait se créer des classes utiles.


.alignleft {
   float: left;
}
        
.alignright {
   float: right;
}

.aligncenter {
   float: none;
   clear:both;
   display: block;
   margin-left: auto;
   margin-right: auto;
}     

Exemple :

5. Centrer un bloc verticalement

a. Si on ne connait pas la taille de la boite

Conteneur en position relative et bloc contenu en position absolute+ top 50% et translatex -50%


.container {
    position: relative;
    display: block;
}
.box_1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Exemple :

b. Si on connait la hauteur de la boite


.container {
    position: relative;
    display: block;
}
.box_1 {
    position: absolute;
    top: 50%;
    margin-top:-75px;
    height: 150px;
}

Exemple :

6. Centrer une liste d’éléments flottants

Avec display « table » sur le conteneur


ul {
   display: table;
   margin: 0 auto;
   padding: 0;
}  
ul li {
    display: block;
    float: left;
}

7. Un bloc de taille fixe et un bloc occupant le reste de l’espace du conteneur

margin-left sur le second bloc (non flottant).


.container {
     width: 80%; /* taille px ou % pour web responsive */
     height: 200px;
     margin:0 auto;
  }    
 
.fixed_box {
     float: left;
     width: 250px;
     height: 100%;
}
        
.margin_box {
     margin-left: 250px;
     height: 100%;
}

8. Centrer un bloc avec « calc »

9. Centrer un bloc avec Flexbox

II. Texte

1. Aligner le texte à gauche, à droite ou le centrer horizontalement

Avec text-align (left,right, center,…)


p{
    text-align: left;
}

2. Centrer du texte verticalement

height + line-height équivalentes


p {
    display: block;
    height: 50px;
    line-height: 50px;
}

Exemple :

3. Centrer, aligner à gauche, aligner à droite une liste d’éléments inline

text-align sur le conteneur + display inline sur les éléments contenus


ul{
    text-align: center;
}
 ul li {
    display: inline;
}

Liens utiles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *