60 lines
1.1 KiB
Markdown
Executable File
60 lines
1.1 KiB
Markdown
Executable File
# Centrer des éléments
|
|
|
|
Il existe plusieurs méthodes permettant de centrer des éléments en CSS. L'utilisation de l'une ou de l'autre dépend généralement du contexte dans lequel se trouve l'élément à centrer.
|
|
|
|
## Description
|
|
|
|
Il est possible de centrer horizontalement et verticalement. À la fois dans toute la page ou dans une zone de contenu définie.
|
|
|
|
## Exemples
|
|
|
|
### Centrer du texte
|
|
|
|
```CSS
|
|
p {
|
|
text-align: center;
|
|
}
|
|
```
|
|
|
|
### Centrer horizontalement un élément dont la largeur est restreinte
|
|
|
|
```CSS
|
|
.container {
|
|
max-inline-size: 60ch;
|
|
margin-inline: auto;
|
|
}
|
|
```
|
|
|
|
### Centrer horizontalement le contenu d'un élément
|
|
|
|
```CSS
|
|
.container {
|
|
display: flex; /* ou grid */
|
|
justify-content: center;
|
|
}
|
|
```
|
|
|
|
### Centrer verticalement le contenu d'un élément
|
|
|
|
```CSS
|
|
.container {
|
|
display: flex; /* ou grid */
|
|
align-items: center;
|
|
}
|
|
```
|
|
|
|
### Centrer horizontalement et verticalement le contenu d'un élément
|
|
|
|
```CSS
|
|
.container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
/* OU */
|
|
.container {
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
```
|