Maison> interface Web> tutoriel CSS> le corps du texte

Partage de compétences front-end : utilisez le contenu ajusté CSS3 pour centrer les éléments horizontalement

王林
Libérer: 2023-09-09 13:36:20
original
1030 Les gens l'ont consulté

前端技巧分享:使用CSS3 fit-content让元素水平居中

Partage d'astuces front-end : utilisez le contenu d'ajustement CSS3 pour centrer les éléments horizontalement

Dans le développement front-end, nous rencontrons souvent des situations où nous devons centrer un élément horizontalement. Cet effet peut être facilement obtenu en utilisant la propriété fit-content de CSS3. Cet article explique comment utiliser l'attribut fit-content et fournit des exemples de code.

L'attribut fit-content est une valeur de longueur relative au conteneur parent de l'élément, qui peut calculer automatiquement la largeur de l'élément en fonction de la taille réelle du contenu. Vous pouvez centrer un élément horizontalement en définissant ses marges gauche et droite sur auto, puis en définissant sa largeur sur fit-content.

Tout d'abord, nous avons besoin d'une structure HTML avec un conteneur parent. Dans l'exemple ci-dessous, nous utilisons un élément div comme conteneur parent, contenant un élément span comme élément à centrer horizontalement.

居中元素
Copier après la connexion

Ensuite, nous devons définir le style CSS. Tout d’abord, nous devons définir la largeur du conteneur parent afin que l’élément centré soit centré dans la zone visible. Nous pouvons utiliser l'attribut margin pour définir les marges gauche et droite sur automatique afin d'obtenir un alignement central.

.parent{ width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; } .centered{ width: fit-content; margin: 0 auto; }
Copier après la connexion

Dans le code ci-dessus, nous utilisons la disposition flexible pour obtenir l'alignement central du conteneur parent. L'attribut justifier-content définit l'alignement central horizontal et l'attribut align-items définit l'alignement central vertical.

Ensuite, ajoutons quelques styles à l'élément centré pour voir l'effet.

.centered{ width: fit-content; margin: 0 auto; background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-size: 18px; color: #333333; }
Copier après la connexion

Maintenant, nous avons fini d'utiliser l'attribut fit-content. Ouvrez le fichier HTML dans le navigateur et vous verrez que l'élément centré est déjà centré horizontalement dans le conteneur parent.

L'utilisation de l'attribut fit-content de CSS3 peut facilement réaliser un centrage horizontal des éléments. Cette technique sera très utile que ce soit dans du responsive web design ou dans certains scénarios nécessitant une mise en page spécifique.

Pour résumer, le centrage horizontal des éléments peut être facilement réalisé en utilisant l'attribut fit-content. En définissant les marges gauche et droite sur auto et la largeur sur fit-content, nous pouvons faire en sorte que l'élément adapte sa largeur en fonction du contenu et l'affiche horizontalement centré dans le conteneur parent.

J'espère que cet article vous aidera à maîtriser l'utilisation de l'attribut CSS3 fit-content pour réaliser un centrage horizontal des éléments !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!