Rue de l'info
← Retour à l'accueil
Html - CSS

CSS comment centrer une image horizontalement et verticalement dans un bloc ?

CSS Comment centrer image horizontalement et verticalement dans un bloc. Le centrage horizontal d'une image dans un un conteneur de type bloc, une par exemple, ne pose pas de problème. Il suffit de définir la propriété CSS text-align à center sur le conteneur.

cyril
CSS comment centrer une image horizontalement et verticalement dans un bloc ?

Horizontalement

Le centrage horizontal d’une image dans un un conteneur de type bloc, une div par exemple, ne pose pas de problème. Il suffit de définir la propriété CSS text-align à center sur le conteneur.

XHTML

My image
1
2
3
4
5
6
 
<!-- HTML -->
<div class="container">
    <img src="rue-de-l-info.png" alt="My image" />
</div>
 

CSS

// CSS .container { width: 200px; height: 200px; border: 1px #23282d solid; text-align: center; }

1
2
3
4
5
6
7
8
9
 
// CSS
.container {
   width: 200px;
   height: 200px;
   border: 1px #23282d solid;
   text-align: center;
}
 

Résultat :

Rue de l'info

Verticalement

Le centrage vertical est plus délicat à mettre en place.

Il faut en effet modifier la propriété display de notre conteneur pour pouvoir utiliser la propriété vertical-align qui nous permettra de positionner verticalement l’image.

CSS

// CSS .container { width: 200px; height: 200px; border: 1px #23282d solid; text-align: center; display: table-cell; vertical-align: middle; }

1
2
3
4
5
6
7
8
9
10
11
 
// CSS
.container {
   width: 200px;
   height: 200px;
   border: 1px #23282d solid;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
}
 

Résultat :

Rue de l'info

Attention
Cette technique fonctionne sur Internet Explorer qu’à partir de la version 8. Une autre solution serait de mettre l’image dans un tableau, mais on perdra en sémantique

Horizontalement avec flexbox

Le centrage horizontal est devenu vraiment facile avec flexbox.

CSS

// CSS .container { display: flex; justify-content: center; width: 200px; height: 200px; border: 1px #23282d solid; } .container img { width: 50px; height: 50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// CSS
.container {
    display: flex;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 1px #23282d solid;
}
.container img {
    width: 50px;
    height: 50px;
}
 

Résultat :

Rue de l'info

Verticalement avec flexbox

Avant l’apparition de flexbox, le centrage verticale des éléments était asses complexe. C’est aujourd’hui beaucoup plus accessible. Nous allons le voir dans l’exemple suivant.

CSS

// CSS .container { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border: 1px #23282d solid; } .container img { width: 50px; height: 50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// CSS
.container {
    display: flex;    
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 1px #23282d solid;
}
.container img {
    width: 50px;
    height: 50px;
}
 

Résultat :

Rue de l'info