Wie kann man einen Text mit CSS vertikal zentrieren
- CSS-Eigenschaft vertical-align
- CSS Flexbox
- CSS Table Display
- CSS-Eigenschaft line-height
- Gleichmäßige obere und untere Polster
- Absolute Positionierung und negative Margin
- Absolute Positionierung und Stretching
- Die Eigenschaft Transform
- Floater div
Die vertikale Zentrierung von Elementen mit CSS ist oft problematisch. Es gibt jedoch mehrere einfache Möglichkeiten für vertikale Zentrierung.
Die CSS-Eigenschaft vertical-align
Die Eigenschaft vertical-align wird verwendet, um inline Elemente vertikal zu zentrieren.
Die Werte für die vertikale Ausrichtung richten das Element relativ zu seinem übergeordneten Element aus:
- Linienrelative Werte richten das Element relativ zur gesamten Linie vertikal aus.
- Die Werte für Tabellenzellen sind relativ zum Tabellenhöhenalgorithmus, was in der Regel die Höhe der Zeile bedeutet.
Beispiel
<!DOCTYPE html>
<html>
<head>
...
<style type="text/css">
div{
width: 200px;
height: 200px;
border: solid green;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>Vertikal ausgerichteter Text</div>
</body>
</html>CSS-Flexbox
CSS-Flexbox kann verwendet werden, um Elemente vertikal (oder horizontal) mit den Eigenschaften align-items, align-self und justify-content anzupassen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: flex;
display: -webkit-flex;
height: 200px;
width: 50%;
margin: auto;
border-radius: 10px;
border: 5px solid black;
background-color: grey;
}
p {
text-align: center;
margin: auto; /* Important */
font-family: Calibri; }
</style>
</head>
<body>
<section>
<p> Ich bin mit Flexbox zentriert!</p>
</section>
</body>
</html>
CSS display:table
Bei dieser Methode werden Elemente als Tabellen und Tabellenzellen und Zentrumsinhalt durch die Eigenschaft vertical-align angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed
#f69c55; }
#child { display: table-cell; vertical-align: middle;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">Ich bin vertikal zentriert</div>
</div>
</body>
</html>Die Eigenschaft line-height
Diese Methode kann verwendet werden, um eine einzelne Textzeile vertikal zu zentrieren. Fügen Sie die Eigenschaft line-height zu dem Element hinzu, das den Text, welcher größere Schriftgröße als seine Schriftgröße hat, enthält. Voreingestellt werden gleiche Leerzeichen über und unter dem Text eingefügt, und Sie erhalten vertikal zentrierten Text.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f68c51;
}
</style>
</head>
<body>
<p>
Ich bin vertikal zentriert
</p>
</body>
</html>Die folgende Methode funktioniert für eine einzelne Zeile und mehrere Zeilen des Textes, erfordert jedoch einen Container mit fester Höhe:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
display: inline-block;
width: 100%;
height: 200px;
vertical-align: middle;
line-height: 200px;
text-align: center;
border: 3px dashed #1c87c9;
}
</style>
</head>
<body>
<div>Ich bin vertikal zentriert </div>
</body>
</html>Gleichmäßige obere und untere Polster
Bei dieser Methode stellen wir die Oberseite und das Padding des übergeordneten Elements auf gleich ein.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.center {
padding: 10% 0;
border: 3px dashed #1c87c9;
}
</style>
</head>
<body>
<div class="center">
<p>Ich bin vertikal zentriert</p>
</div>
</body>
</html>Bei der Einstellung von padding: verwenden Sie %, um dem beim dynamischen Wachsen zu helfen. Diese Methode erfordert einige Berechnungen, um zu verstehen, welche Werte für top: und bottom; eingestellt werden müssen, damit sie dynamisch wachsen. Wenn Sie height: relative; einstellen, keine Berechnung ist erforderlich.
Absolute Positionierung und negative Margin
Diese Methode wird mit den Block-Level-Elementen verwendet. Vergessen Sie nicht, die Höhe des zu zentrierenden Elements einzustellen.
- Stellen Sie #parent {position: relative} und child {position: absolute;} ein.
- Stellen Sie top: 50%; und left: 50%; ein, um die linke Ecke des untergeordneten Elements <div> zu zentrieren.
- Stellen Sie untergeordnetes Element <div> { width: } und {height: } so ein, dass es nach oben und nach links bewegt wird.
- Geben Sie negative Margin ein: Es halbiert die Höhe und Breite.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.parent {
position: relative;
width: 100%;
height: 220px;
background: #1faadb;
color: #fff;
}
.child_1, .child_2 {
position: absolute;
top: 50%;
left: 50%;
width: 110px;
height: 70px;
background: #8ebf42;
text-align: center;
}
.child_1 {
margin: -35px 0 0 -55px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child_1">Vertikal zentrierter Text</div>
</div>
</br>
<div class="parent">
<div class="child_2">Nicht zentrierter Text</div>
</div>
</body>
</html>Absolute Positionierung und Stretching
Bei dieser Methode weisen wir den Browser an, die Margin des untergeordneten Elements automatisch so einzustellen, dass sie gleich werden.
- Den Eltern- {position: relative} und untergeordneten Teil {position: absolute;} einstellen
- Untergeordneten Teil einstellen {top: 0; bottom: 0; left:0; right:0;}
- 4 Margin einstellen: auto; um alle Ränder gleich zu machen und die Ergebnisse mit dem untergeordneten Element <div> sowohl vertikal, als auch horizontal zu zentrieren.
Beispiel
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 30%;
margin: -15% 0 0 -25%;
}Die Eigenschaft transform
Wenn wir Position absolut; links: 50%; oben: 50%; haben, erfolgen die Berechnungen ab der linken oberen Ecke. Um den Text in der Mitte zu positionieren, muss man ihn -50% nach links und 50% nach oben durch transform: translate "bewegen" (-50%;-50%).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.parent {
position: relative;
width: 100%;
height: 220px;
background: #1faadb;
color: #fff;
}
.child_1, .child_2 {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
padding: 5px;
background: #8ebf42;
text-align: center;
}
.child_1 {
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child_1">Vertikal zentrierter Text</div>
</div>
</br>
<div class="parent">
<div class="child_2">Nicht zentrierter Text</div>
</div>
</body>
</html>Verwendung von floater div
Diese Methode erfordert, ein leeres div, welches floated ist, zu haben.
- Float: floater <div> nach links oder rechts.
- Die Höhe einstellen: 50%;
- Leeres untergeordnetes Element.
- Leeres untergeordnetes Element <div> durch die Verwendung von clear: property
Sie sollen das untergeordnete Element um die Hälfte der Höhe nach oben bringen. Um das zu machen, setzen Sie einen negativen Margin-Bottom: am floater <div>.
Beispiel
#parent {
height: 200px;
}
#floater {
float: left;
width: 100%;
height: 50%;
margin-bottom: -50px;
outline: 2px solid #1c87c9;
}
#child {
clear: both;
height:100px;
outline: 2px solid #8ebf42;
}