Solution au problème CSS non centré

Lors de la rédaction d'un site Web ou d'une application, vous rencontrez souvent des problèmes de mise en page CSS, et l'un des plus courants est que les éléments ne sont pas centrés. Que vous centriez du texte, une image ou une zone entière, l'alignement CSS est toujours un défi courant. Voici quelques problèmes courants de centrage CSS et leurs solutions.

1. Texte non centré

Lorsque nous voulons centrer le texte dans un élément, le moyen le plus courant consiste à utiliser l'attribut text-align et à le définir au centre. Mais cela ne fonctionne que pour le contenu en ligne dans les éléments en ligne et les éléments au niveau du bloc. Si nous voulons centrer le texte dans un élément de niveau bloc avec une largeur fixe, nous devons utiliser une autre méthode.

Solution :

Le centrage du texte peut être obtenu en appliquant le code CSS suivant sur l'élément de niveau bloc où réside le texte.

display: flex;
align-items: center;
justify-content: center;

Cela centrera le texte le long des axes vertical et horizontal. Notez que cette méthode fonctionne pour les éléments de niveau bloc avec une largeur et une hauteur fixes.

2. L'élément n'est pas centré

Lorsque nous voulons centrer toute la zone, une méthode courante consiste à utiliser l'attribut margin:auto. Mais dans certains cas, cette approche s’avère inefficace.

Solution :

En utilisant un élément parent avec une disposition flex-box appliquée, l'effet de centrage peut être facilement obtenu.

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

Cela centrera l'élément parent le long des axes horizontal et vertical, et centrera tous les éléments enfants à l'intérieur.

3. Image non centrée

Si nous voulons centrer l'image dans un conteneur, nous pouvons utiliser l'attribut text-align:center. Mais cette méthode ne peut être utilisée que dans des éléments de niveau bloc.

Solution :

Essayez d'appliquer le code CSS suivant dans l'élément parent de l'image :

img {
    display: block;
    margin: auto;
}

Cela convertira l'image en un élément de niveau bloc à l'aide de l'attribut display:block et centrera l'image dans l'élément parent à l'aide de la marge. :attribut auto .

Une autre façon consiste à utiliser l’image comme image d’arrière-plan. Pour ce cas, nous devons utiliser la propriété background-position.

div {
    background: url('image.jpg') no-repeat center center;
    background-size: cover;
}

Cela centrera l'image sur l'élément div et la redimensionnera à l'aide de l'attribut background-size.

Résumé

Ci-dessus sont quelques problèmes et solutions CSS non centrés courants. Comprendre ces méthodes peut non seulement nous aider à mieux concevoir des sites Web et des applications, mais également à améliorer nos compétences et notre efficacité CSS.

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!