diff --git a/view/styles.css b/view/styles.css index 1e65ae2..202777f 100644 --- a/view/styles.css +++ b/view/styles.css @@ -3,8 +3,8 @@ body { background-color: #f4f4f9; color: #333; display: flex; - justify-content: center; - align-items: center; + justify-content: center; /* Horizontale Zentrierung */ + align-items: center; /* Vertikale Zentrierung */ height: 100vh; margin: 0; } @@ -17,6 +17,9 @@ body { padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; /* Zentriert die Links im Container */ } h1 { @@ -25,8 +28,8 @@ h1 { } .link { - display: flex; /* Verwende Flexbox */ - align-items: center; /* Vertikale Ausrichtung des Texts und des Logos */ + display: flex; /* Flexbox für den Link */ + align-items: center; /* Vertikale Ausrichtung von Bild und Text */ margin: 10px 0; padding: 10px; background: #007BFF; @@ -34,13 +37,14 @@ h1 { text-decoration: none; border-radius: 5px; transition: background 0.3s ease; + width: 100%; /* Link nimmt die volle Breite im Container ein */ + justify-content: center; /* Zentriert den Text horizontal im Link */ } .link:hover { background: #0056b3; } -/* Stil für das Logo vor dem Linktext */ .link img { width: 20px; /* Größe des Logos */ height: 20px; /* Höhe des Logos */