Explication détaillée des propriétés d'alignement du texte CSS : text-align et justifier-content

Explication détaillée des propriétés d'alignement du texte CSS : text-align et justification-content

Dans la conception Web, l'alignement du texte est une partie très importante. Un bon alignement du texte peut améliorer la beauté globale et la lisibilité de la page. En CSS, il existe deux propriétés d'alignement de texte couramment utilisées, à savoir text-align et justifier-content.

1. text-align

L'attribut text-align est utilisé pour définir l'alignement horizontal du texte. Il peut être appliqué à la fois aux éléments de niveau bloc et aux éléments en ligne.

Les valeurs pouvant être utilisées sont :

1. left : Aligné à gauche, valeur par défaut.
2. à droite : Alignez à droite.
3. center : alignement central.
4. justifier : Justifiez, le texte de la ligne sera étiré pour remplir toute la largeur de la ligne.

Exemple :

<style>
    p {
        text-align: center;
    }
    h1, h2 {
        text-align: right;
    }
</style>

<h1>这是一个标题</h1>
<h2>这是一个副标题</h2>
<p>这是一段居中对齐的文本。</p>

Dans le code ci-dessus, le texte des éléments de titre h1 et h2 sera aligné à droite, tandis que le texte de l'élément p sera aligné au centre.

2. justifier-content

L'attribut justifier-content est utilisé pour définir l'alignement du texte multiligne. Il ne peut être appliqué qu'aux éléments de niveau bloc et n'est efficace que pour les éléments comportant plusieurs lignes de texte.

Les valeurs pouvant être utilisées sont :

1. flex-start : Valeur par défaut, alignement de départ.
2. flex-end : Alignez à la fin.
3. center : alignement central.
4. espace entre : alignez les deux extrémités, le texte de la ligne sera réparti uniformément dans la ligne, la première ligne sera alignée en haut et la dernière ligne sera alignée en bas.
5. espace autour : uniformément aligné, le texte de la ligne sera réparti uniformément dans la ligne, avec un espace égal au-dessus et au-dessous de chaque ligne.

Exemple :

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        width: 100px;
    }
</style>

<div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
    <div class="item">项目 4</div>
    <div class="item">项目 5</div>
    <div class="item">项目 6</div>
</div>

Dans le code ci-dessus, le conteneur .container utilise une disposition flexible et définit l'attribut justification-content sur espace-entre, de sorte que chaque élément .item soit réparti uniformément dans le conteneur, au-dessus et en dessous du dernière ligne L'espace sera le même que les autres lignes.

En résumé, l'attribut text-align est utilisé pour définir l'alignement horizontal d'une seule ligne de texte, tandis que l'attribut justifier-content est utilisé pour définir l'alignement du texte sur plusieurs lignes. Ils peuvent rendre le texte sur la page plus proprement organisé et améliorer la lisibilité et l’esthétique de la page. En utilisation réelle, vous pouvez choisir l'alignement approprié selon vos besoins et ajuster le style pour obtenir le meilleur effet.

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!