So implementieren Sie die obere und untere CSS-Zentrierung: 1. Stellen Sie die Zeilenhöhe einer einzelnen Zeile von Inline-Elementen gleich der Boxhöhe ein. 2. Verwenden Sie mehrere Zeilen von Inline-Elementen für das übergeordnete Element, um „Anzeige“ festzulegen :table-cell; und Vertical-align: middle;“ reicht aus.
Die obere und untere Zentrierung in CSS ist die vertikale Zentrierung. CSS kann nach Elementen in drei vertikale Zentrierungsmethoden unterteilt werden: einzeilige Inline-Elemente und mehrzeilige Elemente. Die vertikale Zentrierung von Inline-Elementen und Blockelementen wird im Folgenden ausführlich vorgestellt.
Einzeilige Inline-Elemente
Sie müssen nur die „Zeilenhöhe gleich der Höhe der Box“ für die einzeiligen Elemente festlegen. line inline element;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}
#son {
background-color: green;
height: 300px;
}
</style>
<div id="father">
<span id="son">我是单行的行内元素</span>
</div>Effekt:
Mehrere Zeilen von Inline-Elementen
werden für übergeordnete Elemente verwendet. Legen Sie einfach display:table-cell; und Vertical-align: middle;; fest.
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: table-cell;
vertical-align:middle;
}
#son {
background-color: green;
}
</style>
<div id="father">Ich bin ein Inline-Element mit mehreren Zeilen Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen. Ich bin ein Inline-Element mit mehreren Zeilen ;/span>
Effekt:
Element auf Blockebene
Option 1: Positionierung verwenden
Stellen Sie zuerst das übergeordnete Element auf relative Positionierung ein, dann das untergeordnete Element auf absolute Positionierung und legen Sie den oberen Rand fest Untergeordnetes Element: 50 %, das heißt, die obere linke Ecke des untergeordneten Elements wird vertikal ausgerichtet.
Feste Höhe: Legen Sie den oberen Rand des untergeordneten Elements fest: -halbe px der Elementhöhe; set transform: TranslateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
height: 100px;
background-color: green;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>Unbestimmte Höhe: CSS3 verwenden >
Option 2: Verwenden Sie das Flexbox-Layout zur Implementierung (stark variabel, alles ist in Ordnung)Bei Verwendung des Flexbox-Layouts müssen Sie nur die Attributanzeige hinzufügen: flex; align-items: center; Verwandte Tutorials: Das obige ist der detaillierte Inhalt vonWie zentriere ich die Ober- und Unterseite in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website! zum übergeordneten Element des zu verarbeitenden Blockelements: <style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateY(-50%);
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>Nach dem Login kopieren
