CSS -Layout - Horizontale und vertikale Ausrichtung
Elemente
horizontal und vertikal zentrieren
Elemente zentrieren
Um ein Blockelement (wie <div>) horizontal zu zentrieren, verwenden Siemargin: auto;
Das Festlegen der Breite des Elements verhindert, dass es sich bis zu den Rändern seines Containers ausdehnt.
Das Element nimmt dann die angegebene Breite ein und der verbleibende Platz wird gleichmäßig auf die beiden Ränder aufgeteilt:
Dieses div-Element ist zentriert.
Beispiel
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Hinweis: Die Zentrierung hat keine Auswirkung, wenn die widthEigenschaft nicht festgelegt ist (oder auf 100 % festgelegt ist).
Text zentrieren
Um den Text einfach innerhalb eines Elements zu zentrieren, verwenden Sietext-align: center;
Dieser Text ist zentriert.
Beispiel
.center {
text-align: center;
border: 3px solid green;
}
Tipp: Weitere Beispiele zum Ausrichten von Text finden Sie im Kapitel CSS-Text .
Zentrieren Sie ein Bild
Um ein Bild zu zentrieren, setzen Sie den linken und rechten Rand auf autound machen Sie es zu einem blockElement:
Beispiel
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Links- und rechtsbündig - Position verwenden
Eine Methode zum Ausrichten von Elementen ist die Verwendung von position: absolute;:
In meinen jüngeren und verletzlicheren Jahren gab mir mein Vater einige Ratschläge, die ich seitdem in Gedanken durchgehe.
Beispiel
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Hinweis: Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können Elemente überlappen.
Links- und Rechtsausrichtung - Float verwenden
Eine andere Methode zum Ausrichten von Elementen ist die Verwendung der floatEigenschaft:
Beispiel
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Der Clearfix-Hack
Hinweis: Wenn ein Element größer ist als das Element, das es enthält, und es schwebend ist, wird es außerhalb seines Containers überlaufen. Sie können den "clearfix hack" verwenden, um dies zu beheben (siehe Beispiel unten).
Ohne Clearfix
Mit Clearfix
Dann können wir den Clearfix-Hack zum enthaltenden Element hinzufügen, um dieses Problem zu beheben:
Beispiel
.clearfix::after {
content: "";
clear: both;
display: table;
}
Vertikal zentrieren - Mit Polsterung
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.