Texte Javascript Central

Michael Zippo 04.11.2021

Dans ce didacticiel CSS, nous verrons comment centrer du texte et verrouiller des éléments. Il existe plusieurs astuces que vous pouvez utiliser pour centrer des éléments horizontalement et verticalement dans une mise en page.

Pour centrer du texte aligné dans un élément plus grand, utilisez text-align : center ; comme indiqué ci-dessous :

Je suis a div

Et tout le texte est centré par text-align : center

Alignement central éléments de bloc :

Le centrage des éléments de bloc est mieux illustré en utilisant la balise d`un document HTML. Ce que vous devez faire est de vérifier la largeur globale du conteneur, puis de définir la marge sur auto :

Je suis une div

Et tout le texte est centré par text-align : center

Aligner l`image au centre :

Pour centrer une image, dans le sélecteur CSS, modifiez l`affichage de masse puis contrôlez la largeur de l`élément image, en utilisant % ou px. Définissez margin sur auto :

Pour centrer l`image sous-jacente, changez l`affichage en bloc puis définissez les marges sur auto, vérifiez la largeur en utilisant px ou%

Centrer verticalement et horizontalement dans une div :

rembourrage :

Pour centrer verticalement dans un - vous pouvez ensuite utiliser text-align : center pour centrer le paragraphe horizontalement : < br >

Pour centrer l`image sous-jacente, changez l`affichage en bloc puis définissez les marges sur auto, vérifiez la largeur en utilisant px ou%

hauteur de ligne :

Vous pouvez également définir line-height sur la hauteur de l`élément de bloc que vous centrez avec le texte -align: center pour aligner l`élément au centre. Si vous avez plusieurs lignes, utilisez line-height sur le parent et l`enfant et ajoutez vertical-align: middle et display: inline-block à l`enfant : < br>

transform :

Une autre façon de centrer les éléments consiste à utiliser la position et la transformation. Placer le parent en position : relative, l`enfant en position absolue. L`élément enfant devra être positionné en haut et à gauche à 50 %, puis nous utiliserons la propriété transform pour ajuster le texte dans la div. Nous parlerons plus de cette propriété dans un autre article, donc ce n`est pas grave si ce n`est pas clair à 100 % pour le moment :

flexbox :

Enfin, nous pouvons centrer les éléments à l`aide de flexbox. Définissez display : flex sur l`élément parent des enfants que vous souhaitez centrer, puis utilisez align-items et require-content pour le centrer :

Ce sont les moyens les plus courants de résoudre le problème de centrage des éléments dans Layout.