So legen Sie die Zentrierung der HTML-Schriftart fest-Front-End-Fragen und Antworten-php.cn

So legen Sie die Zentrierung der HTML-Schriftart fest

WBOY

Freigeben： 2023-05-05 20:19:07

Original

5465 Leute haben es durchsucht

So legen Sie die Zentrierung von HTML-Schriftarten fest

In HTML ist es aus Gründen der Schönheit und des Lesekomforts häufig erforderlich, den Text auf der Seite zentriert auszurichten. In diesem Artikel erfahren Sie, wie Sie CSS verwenden, um HTML-Text zu zentrieren.

Schritt eins: Wählen Sie das Element aus, das zentriert werden soll.

Zuerst müssen Sie das Element auswählen, das zentriert werden soll. Die HTML-Textzentrierung kann in zwei Arten unterteilt werden: Textzentrierung innerhalb eines einzelnen Tags und Textzentrierung auf der gesamten Seite.

Zentrieren Sie den Text innerhalb eines einzelnen Tags:

Wenn Sie den Text nur innerhalb eines bestimmten Tags zentrieren müssen, können Sie die CSS-Eigenschaft text-align:center zum Festlegen verwenden Es. Zum Beispiel:

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

Nach dem Login kopieren

Zentrieren Sie den Text der gesamten Seite:

Wenn Sie möchten, dass der Text der gesamten Seite zentriert wird, müssen Sie dies für das Body-Element festlegen . Zum Beispiel:

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

Nach dem Login kopieren

Schritt 2: Wählen Sie die Zentriermethode

Nachdem Sie das Element ausgewählt haben, das zentriert werden soll, müssen Sie die entsprechende Zentriermethode auswählen. Zu den gängigen Zentriermethoden gehören die horizontale Zentrierung und die vertikale Zentrierung.

Horizontale Zentrierung:

In CSS können Sie das Margin-Attribut verwenden, um eine horizontale Zentrierung durchzuführen. Die spezifische Implementierungsmethode besteht darin, den linken und rechten Rand des Elements wie folgt auf „Auto“ zu setzen:

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

Nach dem Login kopieren

Das .content-Element ist hier ein div-Element und setzt seine linken und rechten Randattribute auf „Auto“. kann eine horizontale Zentrierung erreichen.

Vertikale Zentrierung:

In CSS ist die vertikale Zentrierung komplizierter und erfordert die Verwendung von Attributen wie Flexbox und Tabellenzelle. Hier finden Sie eine Einführung in die Verwendung von Flexbox gleichzeitige vertikale und horizontale Zentrierung. Die spezifische Implementierungsmethode besteht darin, das übergeordnete Element als Flex-Container und seine untergeordneten Elemente als Flex-Elemente festzulegen und die Attribute align-items und justify-content für die zentrierte Ausrichtung zu verwenden, wie folgt:

<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>

Nach dem Login kopieren

#🎜🎜 #Here.container Es ist das übergeordnete Element, das das display:flex-Attribut verwendet, den .content seines untergeordneten Elements als Flex-Element festlegt und die Attribute align-items und justify-content verwendet, um gleichzeitig eine vertikale und horizontale Zentrierung zu erreichen Zeit.

Zusammenfassung:

Sie können HTML-Text einfach mit CSS zentrieren. Sie müssen die Elemente auswählen, die zentriert werden müssen, und die entsprechende Zentrierungsmethode auswählen. Die horizontale Zentrierung verwendet im Allgemeinen das Randattribut, während die vertikale Zentrierung die Verwendung von Attributen wie Flexbox und Tabellenzelle erfordert.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Zentrierung der HTML-Schriftart fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!