Heim > Artikel > Web-Frontend > So legen Sie die Zentrierung der HTML-Schriftart fest

So legen Sie die Zentrierung der HTML-Schriftart fest

WBOYOriginal: 2023-05-05 20:19:075433Durchsuche

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>

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>

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>

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>

#🎜🎜 #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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So exportieren Sie HTML aus AxureNächster Artikel：So exportieren Sie HTML aus Axure

In Verbindung stehende Artikel

Mehr sehen