Welche Methoden gibt es, um Div-Text vertikal zu zentrieren? Einführung in die Methode zur vertikalen Zentrierung von Div-Text

Die vertikale Zentrierung ist eine sehr verbreitete Zentrierungsmethode im Front-End-Layout. Der folgende Artikel stellt Ihnen die Implementierungsmethode der vertikalen Zentrierung von Div-Text vor.

Zunächst sollten wir wissen, dass die horizontale Zentrierung von Text relativ einfach ist. Elemente auf Zeilenebene legen die Textausrichtungsmitte ihrer übergeordneten Elemente fest, und Elemente auf Blockebene legen ihre eigenen linken und rechten Ränder fest Auto. Aber die vertikale Zentrierung von Div-Text ist nicht so einfach, also schauen wir uns mehrere Implementierungsmethoden der vertikalen Zentrierung von Div-Text genauer an.

1. Das Attribut „Vertical-Alignment“ zentriert den Text

Es gibt viele Werte für die vertikale Ausrichtung: „Middle“, „Bottom“ und „Text-Bottom“. usw. Allerdings stellen wir bei der tatsächlichen Verwendung manchmal fest, dass dieses Attribut „manchmal funktioniert, manchmal aber nicht“. In einigen Fällen sehen wir nach dem Hinzufügen dieses Attributs immer noch keine Änderungen im Bild oder Text. Das liegt daran, dass Vertical-Align nur innerhalb von Elementen wie Inline-Block oder Inline sowie Table-Cell funktioniert.

Beispiel:

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

2. Verwenden Sie die Zeilenhöhe, um den Text vertikal zu zentrieren

Wenn Sie nur eine oder einige Zeilen vertikal zentrieren möchten Text, dann ist es am einfachsten, die Zeilenhöhe des Textes auf die Höhe des Containers anzupassen.

Beispiel:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

3. Verwenden Sie Abstand, um den Text vertikal zu zentrieren.

Verwenden Sie Abstand, um Text vertikal zu zentrieren Verwenden der Zeilenhöhe zum vertikalen Zentrieren von Text. Es eignet sich auch zum vertikalen Zentrieren einer oder mehrerer Textzeilen.

Beispiel:

p { padding:20px 0; }

4. Verwenden Sie die CSS3-Transformation, um Text vertikal zu zentrieren

Beispiel:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5. Verwenden Sie das Flex-Layout, um eine vertikale Zentrierung des Textes zu erreichen.

Beispiel:

.flex{    /*flex 布局*/
    display: flex;    /*实现垂直居中*/
    align-items: center;    /*实现水平居中*/
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}

Dieser Artikel endet hier. Ich möchte mehr über die verschiedenen Funktionen erfahren, die im obigen Code verwendet werden . Informationen zu Attributen finden Sie im CSS-Benutzerhandbuch und im CSS3-Studienhandbuch auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um Div-Text vertikal zu zentrieren? Einführung in die Methode zur vertikalen Zentrierung von Div-Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!