Wie kann ich diesen Text einmitten?

sxmuzh · 30.11.2023

Hallo zusammen,

ich übe gerade HTML und CSS und bin noch Anfänger. Jetzt brauche ich Hilfe, weil ich einen Text nicht vertikal zentrieren kann.

Weiss jemand, was ich falsch gemacht habe oder wie ich es schreiben muss?

Danke im Voraus für die Hilfe

Mein Code:

CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>lesson 11d exercises</title>
    <style>
    p {
      font-family: 'Open Sans', sans-serif;
      margin-top: 0;
      margin-bottom: 0;
      color: rgb(0, 14, 41)
    }
    .grid{
    }
    .teaser {
      width: 100%;
      height: 100%;
      background-color: rgb(195, 195, 200);
      border-radius: 10px;
    }
    .thumbnail {
      width: 100%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .title{
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .teaser-text {
      padding: 20px;
    }
    .teaser-info-text {
      margin-bottom: 20px;
      font-size: 15px;
      opacity: 0.8;
    }
    .kurzer-info-text {
      font-size: 15px;
      margin-bottom: 20px;
    }
    .bottom-row {
      display: grid;
      grid-template-columns: 80px 1fr 80px;
      padding-left: 20px;
      padding-bottom: 20px;
    }
    .daueranzeige {
      font-size: 13px;
      background-color: aliceblue;
    }
    .playbutton {
      width: 50px;
      height: 50px;
      background-color: #007aff;;
      border-radius: 25px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 15px;
    }
    </style>
  </head>
  <body>

    <div class="grid">
      <div class="teaser">
        <!-- Thumbnail -->
          <img class="thumbnail" src="img/Queen_of_russian_hackers-100~_type-at_ratio-16x9_width-1920_916cf1.jpg.png" alt="">
         <!-- Text -->
        <div class="teaser-text">
          <p class="title">The Queen of Russian Hackers</p>
          <p class="teaser-info-text">Wild Wild Web - Geschichten aus dem I...</p>
          <p class="kurzer-info-text">Alle Witte und ihre angebliche Rolle in der Hackergruppe Cotti.</p>
        </div>
        <div class="bottom-row">
          <!-- Dauer -->
            <p class="daueranzeige">50 Min.</p>
          <div></div>
            <span class="playbutton"></span>
        </div>
      </div>

      <div class="teaser">
        <!-- Thumbnail -->
          <img class="thumbnail" src="img/Queen_of_russian_hackers-100~_type-at_ratio-16x9_width-1920_916cf1.jpg.png" alt="">
         <!-- Text -->
        <div class="teaser-text">
          <p class="title">The Queen of Russian Hackers</p>
          <p class="teaser-info-text">Wild Wild Web - Geschichten aus dem I...</p>
          <p class="kurzer-info-text">Alle Witte und ihre angebliche Rolle in der Hackergruppe Cotti.</p>
        </div>
        <div class="bottom-row">
          <!-- Dauer -->
            <p class="daueranzeige">50 Min.</p>
          <div></div>
            <span class="playbutton"></span>
        </div>
      </div>
      <div class="teaser">
        <!-- Thumbnail -->
          <img class="thumbnail" src="img/Queen_of_russian_hackers-100~_type-at_ratio-16x9_width-1920_916cf1.jpg.png" alt="">
         <!-- Text -->
        <div class="teaser-text">
          <p class="title">The Queen of Russian Hackers</p>
          <p class="teaser-info-text">Wild Wild Web - Geschichten aus dem I...</p>
          <p class="kurzer-info-text">Alle Witte und ihre angebliche Rolle in der Hackergruppe Cotti.</p>
        </div>
        <div class="bottom-row">
          <!-- Dauer -->
            <p class="daueranzeige">50 Min.</p>
          <div></div>
            <span class="playbutton"></span>
        </div>
      </div>

    </div>
  </body>
</html>

Sempervivum · 04.12.2023

Hallo und willkommen im Forum!
Meinst Du wirklich vertikal? Das geht sehr einfach mit Flexlayout:

Code:

.teaser {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Aber das wird nur wirksam, wenn freier Raum vorhanden ist, d. h. einige Text sind weniger hoch als die anderen.