move links to mid

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 */