Comment centrer les éléments de votre site ?
Si certains éléments peuvent être centrés assez intuitivement comme un texte ou une image, il est parfois plus compliqué de centrer des éléments tels qu'un tableau, une vidéo YouTube ou un Tweet intégrés dans une page. Dans ce tutoriel nous allons voir quelques techniques pour centrer ces éléments.
Utiliser les colonnes pour centrer un élément
Le plus simple, pour tous les éléments est d'utiliser les colonnes pour centrer l'élément de la colonne du milieu. Pour une vidéo par exemple, ajoutez une nouvelle ligne puis deux nouvelles colonnes. Sur les colonnes de droite et de gauche, placez un petit pourcentage de largeur (le minimum est de 15%). Pour la colonne du milieu, renseignez le pourcentage restant pour que le total des colonnes atteigne 100%, par exemple :
- 15 - 70 - 15
- 20 - 60 - 20
- 25 - 50 - 25
Changez les valeurs des trois largeurs de colonnes avant de valider les changements sur une des trois colonnes. Vous pouvez laisser les colonnes vides, sans définir de widgets à droite et à gauche de la colonne centrale qui aura le contenu, ici une vidéo YouTube pour l'exemple.
Exemple de contenu centré à l'aide des colonnes
Centrer un contenu à l'aide de styles
Certains contenus sont dans une ligne avec d'autres éléments et vous ne souhaitez centrer qu'un seul élément.
Si c'est un texte, cliquez sur l'outil Centrer de la barre d'outil de l'éditeur visuel. Si c'est une image, cliquez sur l'image pour la sélectionner et appuyez une fois sur la flèche de droite et utilisez ensuite ce même outil :
D'autres éléments comme un tableau créé dans un éditeur visuel ne pourront pas être centrés de cette façon. Il faudra passer par l'ajout de styles.
Centrer un tableau
Pour centrer un tableau, utilisez le clic droit sur une bordure du tableau et choisissez ensuite d'accéder aux "Propriétés du tableau" puis accédez aux paramètres avancés du tableau. Ajoutez dans le champ Style : margin-left:auto; margin-right:auto;
Pour un tableau, pensez aussi à définir une largeur en pourcentages (100% par exemple) pour ne pas que le tableau sorte de l'écran sur les Tablettes et Smartphones. Vous pouvez consulter ce tutoriel pour plus d'informations à ce sujet : Optimiser ses contenus pour un affichage responsive.
Centrer un Tweet intégré à votre site
Twitter permet d'intégrer un Tweet sur un site en passant par un copier/coller d'un code HTML. Pour cela, sur Twitter, cliquez sur les options du tweet : la petite flèche en haut à droite, et cliquez sur "Intégrer le Tweet".
Vous serez alors redirigé sur une page avec le code HTML à coller sur un éditeur HTML de votre site. Mais le Tweet sera aligné à gauche. Dans le code HTML remplacez : class="twitter-tweet" par : class="twitter-tweet tw-align-center". Votre Tweet sera alors centré.