Auf Thema antworten

Beitrag

[QUOTE="sxmuzh, post: 14481, member: 4958"]
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:

[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">
        
          <img class="thumbnail" src="img/Queen_of_russian_hackers-100~_type-at_ratio-16x9_width-1920_916cf1.jpg.png" alt="">
         
        <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">
          
            <p class="daueranzeige">50 Min.</p>
          <div></div>
            <span class="playbutton"></span>
        </div>
      </div>

<div class="teaser">
        
          <img class="thumbnail" src="img/Queen_of_russian_hackers-100~_type-at_ratio-16x9_width-1920_916cf1.jpg.png" alt="">
         
        <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">
          
            <p class="daueranzeige">50 Min.</p>
          <div></div>
            <span class="playbutton"></span>
        </div>
      </div>
      <div class="teaser">
        
          <img class="thumbnail" src="img/Queen_of_russian_hackers-100~_type-at_ratio-16x9_width-1920_916cf1.jpg.png" alt="">
         
        <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">
          
            <p class="daueranzeige">50 Min.</p>
          <div></div>
            <span class="playbutton"></span>
        </div>
      </div>

</div>
  </body>
</html>[/CODE]
[/QUOTE]

Authentifizierung