Kostenlose Tutorials für Anfänger

Appearance

Kapitel 15: Ausrichtung & Abstände ​

Ausrichtung und Abstände sind entscheidend für ein professionelles Webdesign! In diesem Kapitel lernen Sie, wie Sie Elemente präzise ausrichten und Abstände kontrollieren.

15.1 Horizontale Ausrichtung: text-align, justify-content, margin: 0 auto; ​

Es gibt 3 Hauptmethoden, um Elemente horizontal auszurichten:

1. text-align (Für Inline- und Inline-Block-Elemente) ​

Verwendung: Zentriert Text oder Inline-Elemente innerhalb eines Block-Elements.

Werte:

  • left: Linksbündig
  • center: Zentriert
  • right: Rechtsbündig
  • justify: Blocksatz

Beispiel:

css
/* Text innerhalb eines Absatzes zentrieren */
p {
    text-align: center;
}

/* Links innerhalb eines Containers zentrieren */
.nav-links {
    text-align: center;
}

HTML:

html
<p>Dieser Text ist zentriert.</p>

<div class="nav-links">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</div>

2. justify-content (Für Flexbox-Container) ​

Verwendung: Zentriert Flex-Items auf der Hauptachse.

Werte:

  • flex-start: Am Anfang (links)
  • center: Zentriert
  • flex-end: Am Ende (rechts)
  • space-between: Gleichmäßiger Abstand (erstes/letztes Item an den Rändern)
  • space-around: Gleichmäßiger Abstand um die Items herum
  • space-evenly: Gleichmäßiger Abstand zwischen allen Items

Beispiel:

css
/* Flex-Container */
.flex-container {
    display: flex;
    justify-content: center; /* Items horizontal zentrieren */
}

3. margin: 0 auto; (Für Block-Elemente mit fester Breite) ​

Verwendung: Zentriert ein Block-Element horizontal.

Erklärung:

  • margin: 0 auto;: 0 für oben/unten, automatisch für links/rechts (Browser teilt den verfügbaren Platz gleichmäßig auf)

Beispiel:

css
/* Block-Element horizontal zentrieren */
.centered-box {
    width: 300px;       /* WICHTIG: Breite muss festgelegt sein! */
    margin: 0 auto;     /* Zentriert horizontal */
    background-color: lightblue;
    padding: 20px;
}

15.2 Vertikale Ausrichtung: vertical-align, align-items, align-self ​

Es gibt 3 Hauptmethoden, um Elemente vertikal auszurichten:

1. vertical-align (Für Inline- und Inline-Block-Elemente) ​

Verwendung: Richtet Inline-Elemente relativ zur Textzeile aus.

Werte:

  • baseline: An der Text-Basislinie (Standard)
  • top: Oben
  • middle: Mitte
  • bottom: Unten

Beispiel:

css
/* Bild vertikal zur Textmitte ausrichten */
img {
    vertical-align: middle;
}

HTML:

html
<p>Dieser Text hat ein Bild <img src="logo.png" alt="Logo"> daneben.</p>

2. align-items (Für Flexbox-Container) ​

Verwendung: Richtet Flex-Items auf der Querachse aus.

Werte:

  • stretch: Dehnt Items auf die volle Höhe aus (Standard)
  • flex-start: Am Anfang (oben)
  • center: Zentriert
  • flex-end: Am Ende (unten)
  • baseline: An der Text-Basislinie

Beispiel:

css
/* Flex-Container */
.flex-container {
    display: flex;
    align-items: center; /* Items vertikal zentrieren */
    height: 200px;      /* WICHTIG: Container muss eine Höhe haben! */
    border: 1px solid #cccccc;
}

3. align-self (Für einzelne Flex-Items) ​

Verwendung: Überschreibt align-items für ein einzelnes Flex-Item.

Beispiel:

css
/* Einzelnes Item am unteren Rand ausrichten */
.item-bottom {
    align-self: flex-end;
}

15.3 Element-Abstände: margin, padding, grid-gap, gap ​

Abstände zwischen Elementen sind wichtig für Lesbarkeit und Ästhetik!

1. margin (Außenabstand) ​

Legt den Abstand zwischen einem Element und anderen Elementen fest.

Beispiel:

css
/* Abstand auf allen vier Seiten */
.box {
    margin: 20px;
}

/* Oben/unten und links/rechts separat */
.box {
    margin: 10px 20px; /* 10px oben/unten, 20px links/rechts */
}

/* Alle vier Seiten einzeln */
.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
}

2. padding (Innenabstand) ​

Legt den Abstand zwischen dem Inhalt eines Elements und seinem Rahmen fest.

Beispiel:

css
/* Innenabstand auf allen vier Seiten */
.card {
    padding: 30px;
}

/* Oben/unten und links/rechts separat */
.card {
    padding: 10px 20px; /* 10px oben/unten, 20px links/rechts */
}

3. grid-gap (Für Grid-Container) ​

Legt den Abstand zwischen Grid-Items fest.

Beispiel:

css
/* Grid-Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px; /* Abstand zwischen Grid-Items (gleich für Zeilen und Spalten) */
}

/* Oder separat: */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 20px; /* 10px vertikaler Abstand, 20px horizontaler Abstand */
}

4. gap (Für Flexbox- und Grid-Container - Modern!) ​

Die moderne Schreibweise für grid-gap (funktioniert auch bei Flexbox!).

Beispiel:

css
/* Flex-Container */
.flex-container {
    display: flex;
    gap: 20px; /* Abstand zwischen Flex-Items */
}

/* Grid-Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Abstand zwischen Grid-Items */
}

15.4 Anfänger-Tipps: 5 Methoden zur vertikalen Zentrierung ​

Vertikale Zentrierung ist ein klassisches Problem im CSS! Hier sind 5 Methoden (Anfänger sollten Flexbox und Positionierung verwenden):

✅ Methode 1: Flexbox (Am einfachsten!) ​

css
.container {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    height: 200px;         /* WICHTIG: Container muss eine Höhe haben! */
}

✅ Methode 2: Grid (Ebenfalls einfach!) ​

css
.container {
    display: grid;
    place-items: center;     /* Kurzschreibweise für justify-items + align-items */
    height: 200px;         /* WICHTIG: Container muss eine Höhe haben! */
}

✅ Methode 3: Positionierung + Transform (Für absolut positionierte Elemente) ​

css
.container {
    position: relative;    /* Bezugspunkt für absolut positionierte Elemente */
    height: 200px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Element um seine eigene Hälfte nach links/oben verschieben */
}

⚠️ Methode 4: line-height (Nur für einzeiligen Text!) ​

css
.container {
    height: 200px;
    line-height: 200px;    /* Gleich wie die Höhe des Containers */
    text-align: center;    /* Horizontal zentrieren */
}

⚠️ Methode 5: display: table; + display: table-cell; (Veraltet!) ​

css
.container {
    display: table;
    height: 200px;
}

.centered {
    display: table-cell;
    vertical-align: middle;    /* Vertikal zentrieren */
    text-align: center;       /* Horizontal zentrieren */
}

15.5 Praxis: Elemente horizontal/vertikal zentrieren, gleichmäßig verteilen ​

Lassen Sie uns das Gelernte in praktischen Beispielen anwenden!

🎯 Beispiel 1: Elemente horizontal und vertikal zentrieren (Flexbox) ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zentrierung mit Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="centered-container">
        <div class="centered-box">Zentriert!</div>
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Container */
.centered-container {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    height: 100vh;          /* Volle Bildschirmhöhe */
    background-color: #f0f0f0;
}

/* Zentrierte Box */
.centered-box {
    background-color: #3366cc;
    color: white;
    padding: 40px 80px;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: bold;
}

🎯 Beispiel 2: Elemente gleichmäßig verteilen (Flexbox) ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gleichmäßig verteilte Navigation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="main-nav">
        <a href="#">Startseite</a>
        <a href="#">Über uns</a>
        <a href="#">Dienstleistungen</a>
        <a href="#">Kontakt</a>
    </nav>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Navigation */
.main-nav {
    display: flex;
    justify-content: space-between; /* Gleichmäßiger Abstand (erstes/letztes Item an den Rändern) */
    align-items: center;            /* Vertikal zentrieren */
    background-color: #333333;
    padding: 20px 40px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #4CAF50;
}

🎯 Beispiel 3: Elemente gleichmäßig verteilen (Grid) ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gleichmäßig verteilte Karten</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">Karte 1</div>
        <div class="card">Karte 2</div>
        <div class="card">Karte 3</div>
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

/* Karten-Container */
.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 20px;                         /* Abstand zwischen den Karten */
    max-width: 1200px;
    margin: 0 auto;                    /* Horizontal zentrieren */
}

/* Einzelne Karte */
.card {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;                 /* Text horizontal zentrieren */
    font-size: 1.25rem;
    font-weight: bold;
    color: #333333;
}

📝 Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  • ✅ Horizontale Ausrichtung (text-align, justify-content, margin: 0 auto;)
  • ✅ Vertikale Ausrichtung (vertical-align, align-items, align-self)
  • ✅ Element-Abstände (margin, padding, grid-gap, gap)
  • ✅ 5 Methoden zur vertikalen Zentrierung (Flexbox, Grid, Positionierung, line-height, display: table;)
  • ✅ Praktische Beispiele: Zentrierung, gleichmäßige Verteilung

🎯 Nächste Schritte ​

Im nächsten Kapitel werden wir:

  1. Überlauf (Overflow) erlernen
  2. Überlauf-Eigenschaften anwenden
  3. Praktische Projekte zur Überlaufsteuerung erstellen

Bereit für mehr? Los geht's! 🎨

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials