Vier CSS-Methoden zur Erzielung einer vertikalen Zentrierung

In diesem Artikel werden vier Arten von CSS erläutert, um den vertikalen Zentrierungseffekt zu erzielen. Die Idee ist klar und sehr gut, und Freunde, die sie benötigen, können darauf verweisen

Zeilenhöhe Um eine vertikale Zentrierung einer einzelnen Textzeile zu erreichen

Früher dachte ich, dass die vertikale Zentrierung einer einzelnen Textzeile das Festlegen der Höhe und Zeile erfordert height auf den gleichen Wert, es besteht jedoch keine Notwendigkeit, die Höhe festzulegen. Tatsächlich erscheint der Text selbst zentriert auf einer Zeile. Ohne eine Höhe festzulegen, erweitert die Zeilenhöhe die Höhe.

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p class="test">测试文字</p>

Stellen Sie Vertical-Align:Middle ein, um eine vertikale Zentrierung zu erreichen

【1】Stellen Sie die Anzeige des übergeordneten Elements auf Tabellenzelle ein

Indem Sie „vertikal-align:middle“ für das Tabellenzellenelement festlegen , können Sie alle untergeordneten Elemente vertikal zentrieren. Dies ähnelt der vertikalen Zentrierung von Zellen in Tabellen

[Hinweis] Wenn der IE7-Browser dies unterstützt, können Sie es in ändern.

[Hinweis] Der p-Satz Zur Tabellenzelle kann keine schwebende oder absolute Positionierung verwendet werden, da durch die schwebende oder absolute Positionierung das Element Elementeigenschaften auf Blockebene aufweist und dadurch die vertikale Ausrichtungsfunktion des Tabellenzellenelements verloren geht.

Wenn eine schwebende oder absolute Positionierungsverarbeitung erforderlich ist, muss eine weitere p-Schicht außerhalb platziert werden.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
    <p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>   
</p>

[2] Wenn das untergeordnete Element ein Bild ist, legen Sie stattdessen die Zeilenhöhe des übergeordneten Elements fest der Höhe und setzen Sie die Schriftgröße des übergeordneten Elements auf 0.

Vertical-Alignment: Die Erklärung von middle ist, dass der Mittelpunkt des Elements an der Grundlinie des übergeordneten Elements plus der Hälfte der Höhe des Buchstabens X im übergeordneten Element ausgerichtet ist. Da das Zeichen X im Geviertfeld nicht vertikal zentriert ist und die oberen und unteren Positionen des Zeichens

Wenn also die Schriftgröße größer ist, ist der Unterschied deutlicher. Wenn die Schriftgröße 0 ist, entspricht dies dem Festlegen der Schriftgröße des Zeichens X auf 0, sodass eine vollständige vertikale Zentrierung erreicht werden kann.

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</p>

【3】Erzielen Sie einen vertikalen Zentrierungseffekt durch Hinzufügen neuer Elemente

Setzen Sie die Höhe des neuen Elements auf die Höhe des übergeordneten Elements, die Breite auf 0 und legen Sie außerdem das vertikal zentrierte Inline-Block-Element von Vertical-Align: Middle fest. Da der Abstand zwischen den beiden Elementen analysiert wird, müssen Sie die Schriftgröße auf der übergeordneten Ebene festlegen und dann die Schriftgröße auf der untergeordneten Ebene auf den erforderlichen Wert festlegen. Wenn die strukturellen Anforderungen nicht streng sind, können Sie sie anzeigen Wenn Sie die beiden Elemente in einer Zeile einfügen, ist es nicht erforderlich, die Schriftgröße: 0 festzulegen.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
  <p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
  <i class="childSbling"></i> 
</p>

Idee 3: Vertikale Zentrierung durch absolute Positionierung

【1】Wenn die Höhe des untergeordneten Elements nicht festgelegt ist, verwenden Sie top50% und translatorY(-50%), um den Zentrierungseffekt zu erzielen.

Der Prozentsatz der Übersetzungsfunktion ist relativ zu ihrer eigenen Höhe, sodass top:50% in Kombination mit TranslateY(-50%) den Zentrierungseffekt erzielen kann.

[Hinweis] IE9-Browser unterstützt nicht

[Hinweis] Wenn die Höhe des untergeordneten Elements bekannt ist, kann die Funktion Translate() auch durch margin-top ersetzt werden: a negativer Höhenwert.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

[2] Wenn die Höhe des untergeordneten Elements fest ist, wird in Kombination mit dem Attribut „Absolut positioniertes Boxmodell“ der Zentrierungseffekt erzielt

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Legen Sie in horizontaler Mittelausrichtung eine Schicht p auf die Außenseite des Elements und Setzen Sie das Absolute und legen Sie den negativen linken Rand für das Element fest. Oder das relative negative linke Attribut kann den Effekt einer horizontalen Zentrierung erzielen. Da der Rand jedoch relativ zur Breite des enthaltenden Blocks ist, erhält margin-top:-50 % die Breite statt -50 % der Höhe, sodass dies für den relativen Prozentwert, die Höhe des enthaltenden Blocks, nicht möglich ist ist auto In diesem Fall unterstützen Chrome-, Safari- und IE8+-Browser das Festlegen des prozentualen Spitzenwerts des Elements nicht, daher ist dies nicht möglich.

Idee 4: Verwenden Sie das flexible Boxmodell Flex, um eine vertikale Zentrierung zu erreichen

[Hinweis] IE9-Browser unterstützt

【1】Legen Sie die Querachsenausrichtung für den skalierbaren Container fest. align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>

【2】 Im skalierbaren Projekt Rand festlegen: automatisch 0

Das obige ist der detaillierte Inhalt vonVier CSS-Methoden zur Erzielung einer vertikalen Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!