recherche

Maison >interface Web >Questions et réponses frontales >Comment définir le centrage de la police HTML

Comment définir le centrage de la police HTML

WBOY
WBOYoriginal
2023-05-05 20:19:075504parcourir

Comment paramétrer le centrage des polices HTML

En HTML, par souci d'esthétique et de confort de lecture, il est souvent nécessaire d'aligner le texte sur la page au centre. Cet article vous montrera comment utiliser CSS pour centrer le texte HTML.

Étape 1 : Sélectionnez l'élément qui doit être centré

Vous devez d'abord sélectionner l'élément qui doit être centré. Le centrage du texte HTML peut être divisé en deux catégories : le centrage du texte dans une seule balise et le centrage du texte sur l'ensemble. page.

Centrer le texte dans une seule étiquette :

Si vous avez uniquement besoin de centrer le texte dans une certaine étiquette, vous pouvez utiliser la propriété CSS text-align:center pour le définir. Par exemple : 

<p style="text-align:center;">这是中间对齐的文字</p>

Centrer le texte de la page entière :

Si vous avez besoin que le texte de la page entière soit centré, vous devez le définir pour l'élément body. Par exemple : 

<style>
    body {
        text-align: center;
    }
</style>
<body>
    <h1>这是标题</h1>
    <p>这是一段正文文字</p>
    <ul>
        <li>这是列表项目1</li>
        <li>这是列表项目2</li>
    </ul>
</body>

Étape 2 : Choisissez la méthode de centrage

Après avoir sélectionné l'élément qui doit être centré, vous devez choisir la méthode de centrage appropriée. Les méthodes de centrage courantes incluent le centrage horizontal et le centrage vertical.

Centrage horizontal :

En CSS, vous pouvez utiliser la propriété margin pour effectuer un centrage horizontal. La méthode d'implémentation spécifique consiste à définir les marges gauche et droite de l'élément sur auto, comme suit : 

<style>
    .content {
        margin: 0 auto;
        text-align: center;
    }
</style>
<div class="content">
    <h1>这是标题</h1>
    <p>这是一段正文文字</p>
</div>

L'élément .content ici est un élément div, et définir ses propriétés de marge gauche et droite sur auto peut obtenir un centrage horizontal.

Centrage vertical :

En CSS, le centrage vertical est plus compliqué et nécessite l'utilisation d'attributs tels que Flexbox et table-cell. Voici comment utiliser Flexbox pour obtenir un centrage vertical et horizontal simultané. La méthode d'implémentation spécifique consiste à définir l'élément parent en tant que conteneur flexible, et à définir ses éléments enfants en tant qu'éléments flexibles, et à utiliser les attributs align-items et justifier-content pour l'alignement central, comme suit : 

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .content {
        text-align: center;
    }
</style>
<div class="container">
    <div class="content">
        <h1>这是标题</h1>
        <p>这是一段正文文字</p>
    </div>
</div>

Le .container ici est l'élément parent, à l'aide de l'attribut display: flex, définissez son élément enfant .content comme élément flex et utilisez les attributs align-items et justifier-content pour obtenir un centrage vertical et horizontal en même temps.

Résumé :

En utilisant CSS, vous pouvez facilement centrer le texte HTML. Vous devez sélectionner les éléments qui doivent être centrés et la méthode de centrage appropriée. Le centrage horizontal utilise généralement l'attribut margin, tandis que le centrage vertical nécessite l'utilisation de propriétés telles que Flexbox et table-cell.

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!

Déclaration：
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
Article précédent：Comment exporter du HTML depuis axureArticle suivant：Comment exporter du HTML depuis axure

Articles Liés

Voir plus