So stellen Sie die CSS-Schriftart so ein, dass sie in einer einzelnen Zeile zentriert wird

So stellen Sie die CSS-Schriftart so ein, dass sie in einer einzelnen Zeile zentriert wird. Erstellen Sie dann ein p-Tag in das div. Legen Sie schließlich das Attribut „text-align: center;“ fest, um die einzelne Zeile zu zentrieren.

Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.

Css stellt die Schriftart so ein, dass sie in einer einzelnen Zeile zentriert wird.

1 Erstellen Sie zunächst zur Vereinfachung der Beobachtung ein div-Tag. align: center; attribute Eine einzelne Zeile zentrieren.

<style>
    .app{
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
    }
</style>
<div class="app">
    
</div>

3 Wenn es sich um ein Inline-Element wie span handelt, können Sie das Attribut text-align: center zu seinem übergeordneten Element hinzufügen.

<style>
    .app{
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
    }
    .app > p{
        text-align: center;
        overflow: hidden;　
        text-overflow:ellipsis;　　
        white-space: nowrap;
    }
</style>
<div class="app">
    <p>Hello World！</p>
</div>

4 Um eine vertikale Zentrierung einer einzelnen Textzeile zu erreichen -height und übergeordnetes Element Die Höhen sind gleich.

<style>
    .app{
        width: 200px;
        height: 100px;
        text-align: center;
        border: 1px solid skyblue;
    }
</style>
<div class="app">
    <span>Hello World！</span>
</div>

Empfohlen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo stellen Sie die CSS-Schriftart so ein, dass sie in einer einzelnen Zeile zentriert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!