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
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: