vertical centered pictures

2021-03-07 13:13:32 +01:00
parent d2887597d1
commit f3ed818f7b
1 changed files with 13 additions and 10 deletions
--- a/index.php
+++ b/index.php
@ -15,22 +15,25 @@ $selected = $files[random_int(0, count($files)-1)];
        <title>Hello, world!</title>

        <style>
-            html, body, #mainContainer, #mainCarousel, .carousel-inner, .carousel-item {
-                height: 100%;
-            }
-
-            .carousel-item img {
-                max-width: 100%;
-                max-height: 100%;
-            }
-
            body {
                background-color: #222;
            }

-            .carousel-inner {
+            html, body, #mainContainer, #mainCarousel, #mainCarousel .carousel-inner, #mainCarousel .carousel-item {
+                height: 100%;
+            }
+
+            #mainCarousel .carousel-item {
                text-align: center;
            }
+
+            #mainCarousel .carousel-item img {
+                position: relative;
+                max-width: 100%;
+                max-height: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+            }
        </style>
    </head>
    <body >