Heim > Artikel > Web-Frontend > CSS-Element vertikal zentriert
CSS-Element vertikal zentriert
- autoloadOriginal
- 2021-04-06 16:04:031710Durchsuche
Das lästige Problem bei CSS ist die vertikale Zentrierung. Es gibt mehrere Möglichkeiten, eine vertikale Zentrierung zu erreichen, aber jede Methode weist bestimmte Einschränkungen auf, sodass die vertikale Zentrierung entsprechend den tatsächlichen Geschäftsszenarien verwendet werden kann.
1. Der Inhalt im Container besteht nur aus einer Textzeile
2. Die einfachste vertikale Zentrierungsmethode in CSS besteht darin, den Container anzugeben Gleiche obere und untere Polsterung, sodass Behälter und Inhalt ihre eigene Höhe bestimmen können. Schauen Sie sich das Beispiel unten an, das den Inhalt im übergeordneten Container vertikal zentriert, indem auf einen gleichen Wert gesetzt wird. <!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
background-color: #1888fa;
color: white;
}
span {
line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。
这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>
padding-top 和padding-bottom
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1888FA;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>Empfohlen: „Zusammenfassung der CSS-Interviewfragen 2021 (Neueste)“
Das obige ist der detaillierte Inhalt vonCSS-Element vertikal zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Warum muss CSS initialisiert werden?
- Es gibt verschiedene Arten der Positionierung in CSS
- So verwenden Sie Inline zur Einführung eines CSS-Stylesheets
- So legen Sie die Elementhöhe in CSS auf 20 Pixel fest
- Verfügt CSS über einen Hypertext-Tag-Selektor?
- So legen Sie den oberen Randabstand von CSS-Bildern fest
- Was bedeutet Skew in CSS?