CSS-Layout – Horizontale und vertikale Ausrichtung

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen
▲ ▼
◀ ►

Center elements
horizontally and vertically

Elemente zentrieren

Um ein Blockelement (wie <div>) horizontal zu zentrieren, verwenden Sie margin: auto;

Durch Einstellen der Breite des Elements wird verhindert, dass es sich bis zum Rand ausdehnt Kanten seines Behälters.

Das Element nimmt dann die angegebene Breite und den verbleibenden Platz ein wird zu gleichen Teilen auf die beiden Ränder aufgeteilt:

This div element is centered.

Beispiel

.center
{
  margin: auto;
   
width: 50%;
   
border: 3px solid green;
  padding: 10px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p>Hello World!</p>
</div>

</body>
</html>

Hinweis: Die zentrierte Ausrichtung hat keine Auswirkung, wenn die Eigenschaft width nicht festgelegt ist (oder auf 100 % setzen).

Text zentriert ausrichten

Um den Text innerhalb eines Elements einfach zu zentrieren, verwenden Sie text-align: center;

This text is centered.

Beispiel

.center {
  text-align: center;
  
border: 3px solid green;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>

Tipp: Weitere Beispiele zum Ausrichten von Text finden Sie im Kapitel „CSS-Text“.

Zentrieren Sie ein Bild

Um ein Bild zu zentrieren, stellen Sie den linken und rechten Rand auf auto ein und machen Sie daraus ein Block-Element:

Paris

Beispiel

img
{
  display: block;
    margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

Links und rechts ausrichten - Position verwenden

Eine Methode zum Ausrichten von Elementen ist die Verwendung von position: absolute;:

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Beispiel

.right
{
  position: absolute;
   
right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the position property</h2>

<p>An example of how to right align elements with the position property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Hinweis: Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können Elemente überlappen.

Links und rechts ausrichten - Mit Float

Eine andere Methode zum Ausrichten von Elementen ist die Verwendung der Eigenschaft float:

Beispiel

.right
{
  float: right;
   
width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the float property</h2>

<p>An example of how to right align elements with the float property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Der Clearfix-Hack

Hinweis: Wenn ein Element höher ist als das Element, das es enthält, und es schwebend ist, wird es wird außerhalb seines Behälters ü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 das Problem zu beheben dieses Problem:

Beispiel

 .clearfix::after {
  content: "";
  clear: both;
  
  display: table;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Vertikal zentrieren - Polsterung verwenden

Es gibt viele Möglichkeiten, ein Element in CSS vertikal zu zentrieren. Eine einfache Lösung besteht darin, oben und unten Padding zu verwenden:

I am vertically centered.

Beispiel

.center {
  padding: 70px 0;
  border: 3px solid 
green;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center vertically with padding</h2>

<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

Um sowohl vertikal als auch horizontal zu zentrieren, verwenden Sie padding und text-align: center:

I am vertically and horizontally centered.

Beispiel

.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Center with padding and text-align</h2>

<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Vertikal zentrieren - Verwenden der Zeilenhöhe

Ein weiterer Trick besteht darin, die Eigenschaft line-height mit einem gleichen Wert zu verwenden zur Eigenschaft height:

I am vertically and horizontally centered.

Beispiel

.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;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Center with line-height</h2>

<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Vertikal zentrieren - Verwenden von Position und Transformation

Wenn padding und line-height keine Optionen sind, eine andere Lösung ist die Verwendung der Positionierung und der Eigenschaft transform:

I am vertically and horizontally centered.

Beispiel

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  
position: absolute;
  top: 50%;
  
left: 50%;
  transform: translate(-50%, -50%);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Center with position and transform</h2>

<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Tipp: Weitere Informationen zur Transformationseigenschaft finden Sie in unseren 2D-Transformationen Kapitel.

Vertikal zentrieren - Verwenden von Flexbox

Sie können Flexbox auch zum Zentrieren von Dingen verwenden. Beachten Sie nur, dass Flexbox in IE10 und früheren Versionen nicht unterstützt wird:

I am vertically and horizontally centered.

Beispiel

 .center {
  display: flex;
  justify-content: center;
  
  align-items: center;
  height: 200px;
  border: 3px solid 
  green; 
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h2>Flexbox Centering</h2>

<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Tipp: Mehr über Flexbox erfahren Sie in unserem CSS-Flexbox-Kapitel.