vertikales Zentrieren klappt nicht ganz

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

rernanded

Erfahrenes Mitglied
Hallo,
habe folgenden html und css Code der nicht so ganz wie gewünscht funktioniert.
Und zwar geht es um das vertikale Zentrieren der Inhalte/Texte mittels CSS für .grid > div p
Irgendwie gibt es oberhalb des Inhalts(Textes) einen größeren Abstand zum Rand als unten. Nur warum? Sieht aus wie eine leer Textzeile?

MONI



HTML:
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title></title>
 
<style>
body {
  margin: 10px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 30px;
}
.grid > div {
  background: #123;
  color: #FFF;
  text-align: center; /*text-align: justify;*/
  border-radius: 10px;  
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);  
  border: solid 0px #FFF;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
animation: 0.6s ease-out SlideInFromRight;
}
@keyframes SlideInFromRight {
  0% {
transform: translateX(100%);
  }
  100% {
transform: translateX(0%);
  }
}
.grid > div p {
  padding: 10px 10px 10px 10px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 13px system-ui;
  word-wrap: break-word;
}
</style>

</head>

<body>

<div class="grid">

<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
</p>
</div>

<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architectoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo. Eius, maiores ad? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
</p>
</div>

<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
</p>
</div>

<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architectoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo. Eius, maiores ad? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
</p>
</div>

<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
</p>
</div>

<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architectoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo. Eius, maiores ad? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse aliquid laboriosam minima ex praesentium recusandae reprehenderit unde sit tempore atque aut commodi quae expedita corrupti, dignissimos architecto. Eius, maiores ad?
</p>
</div>

</div><!--ENDE class="grid"-->

</body>

</html>
 
Zuletzt bearbeitet:
Mir scheint, das liegt daran, dass ein p-Element per Default ein margin-top hat und dass das bei dem transform: translate(-50%, -50%); nicht einbezogen wird. Setze ich das auf 0, klappt es mit der Zentrierung.
Du kannst die p-Elemente jedoch auf die bewährte Weise mit Flex zentrieren, musst jedoch dabei daran denken, die min-width auf 0 zu setzen:
Code:
        .grid>div {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #123;
            color: #FFF;
            text-align: center;
            /*text-align: justify;*/
            border-radius: 10px;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
            border: solid 0px #FFF;
            transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -webkit-transform: rotate(-3deg);
            animation: 0.6s ease-out SlideInFromRight;
        }

        @keyframes SlideInFromRight {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(0%);
            }
        }

        .grid>div p {
            min-width: 0;
            padding: 10px 10px 10px 10px;
            position: relative;
            /* top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); */
            font: 13px system-ui;
            word-wrap: break-word;
        }
 
PS: Ich finde es etwas unschön, dass die Drehung erst wirkt, wenn die Animation fertig ist. Sie wirkt gleich von Anfang an, wenn Du sie in die Animation einbeziehst:
Code:
        .grid>div {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #123;
            color: #FFF;
            text-align: center;
            /*text-align: justify;*/
            border-radius: 10px;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
            border: solid 0px #FFF;
            /* transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -webkit-transform: rotate(-3deg); */
            animation: 0.6s ease-out SlideInFromRight forwards;
        }

        @keyframes SlideInFromRight {
            0% {
                transform: rotate(-3deg) translateX(100%);
            }

            100% {
                transform: rotate(-3deg) translateX(0%);
            }
        }
 
Für alle die sowas auch mal machen wollen hier mal das Responsive css:

CSS:
body {
  margin: 15px 30px 10px 10px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(8em + ((8vw - 0.1em) * 1)), 1fr));
  grid-gap: 30px;
}
.grid > div {
  background: #123;
  color: #FFF;
  text-align: center;
  text-align: justify;
  border-radius: 10px; 
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3); 
  border: solid 0px #FFF;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
animation: 0.6s ease-out SlideInFromRight;
}
@keyframes SlideInFromRight {
  0% {
transform: translateX(100%);
  }
  100% {
transform: translateX(0%);
  }
}
.grid > div p {
  padding: 10px 10px 10px 10px;
  position: relative;
   top:45%;  
  left: 50%;
  transform: translate(-50%, -50%);
  font: 13px system-ui;
  word-break:break-all;
  word-break:break-word;
}
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück