Search code examples
htmlcssimagecss-gridcentering

Vertically center/align image div with adjacent text div in css grid

Probably missing sth here but I've tried to align this for two days now and browsed through + tried pretty much everything I could find on stackoverlow etc. about it.

I have a CSS grid on a website that contains (per grid item) a text div and an img div. I'm trying to keep the img vertically centered relative to the text.

@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    grid-gap: 20px;
    margin: 20px;
  }
  .grid__item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    background-color: var(--primary-color);
    width: auto;
    min-height: auto;
    padding: 15px;
  }
}

.grid__item .grid__item-text-l {
  display: block;
  float: left;
  width: 55%;
}

.grid__item .grid__item-img-r {
  display: block;
  width: 40%;
  height: 100%;
  float: right;
}

.grid__item .grid__item-text-r {
  display: block;
  float: right;
  width: 55%;
}

.grid__item .grid__item-img-l {
  display: block;
  width: 40%;
  height: 100%;
  float: left;
}

img.dummy-img {
  height: 300px;
  max-width: 350px;
}
<div class="main-heading-large">Hundetraining vom Feinsten</div>
<div class="grid">
  <div class="grid__item">

    <div class="grid__item-text-l">
      <h2>Ein Korb für alle Fälle</h2>
      <p>
        „Der tut nix!“, hallte es in den frühen Abendstunden an den malerischen Ufern des Starnberger Sees aus der Ferne. Darauf Stille. Im nächsten Augenblick kam „Der“ hochmotiviert und mit Karacho durch die Kurve des Parkweges geschossen. Mit lautem Getöse
        krachte der Foxterrier-Rüde in den angeleinten Hütehund-Neuling, um dem Zottelbär zu zeigen, wo in „seinem“ Park der Hammer hängt. Ergebnis: 1. „Der“ ist nicht erstickt. 2. „Der“ und Halter müssen reden. 3. Für den Diskurs konnte ein Maulkorb
        als Moderator gewonnen werden. Ich zeige Ihnen, welches Modell für Ihren Hund am besten geeignet ist.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div class="grid__item-img-r">
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Australian Shepherd mit Osterkorb.">
    </div>
  </div>

  <div class="grid__item">
    <div class="grid__item-text-r">
      <h2>Born to lead?</h2>
      <p>
        Feldmanns Leben ist eines der härtesten. Soviel ist sicher. Sein täglicher Wahnsinn beginnt morgens mit einem hochmotivierten Kontrollgang durchs Viertel. Dabei hinterlässt er an zentralen Infotheken Kurzanweisungen für ein gedeihliches Miteinander in
        seinem Revier. Falls nötig, führt er auch Einzelgespräche. Die liebt er besonders. Wieder zu Hause angekommen, reicht ihm seine Küchenhilfe Frühstück. Es folgt ein kurzes Verdauungslauern, denn in herrlicher Unregelmäßigkeit ist im weiteren Tagesablauf
        mit lästigen Störvorfällen zu rechnen. Dann ist Feldmanns strategische Führung gefragt. Das Läuten der Klingel ruft beispielsweise seine Türsteherqualitäten auf den Plan. Tür auf, und es folgt ein distanzloser Bodycheck des Besuchs sowie eine
        grimmige Sitzplatzblockade seiner Sofalandschaft im Wohnzimmer. Da gibt es einfach Grenzen. Seine. Außerdem hat die Küche Gartenblick. Mit dem Einstellen der Bewegungsreize in seinem Umfeld fährt der Master of Desaster runter. Bis zum Ende der
        Besuchszeit. Dann beginnt seine nächste Schicht.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div class="grid__item-img-l">
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Ein Rottweiler im Anzug.">
    </div>
  </div>

  <div class="grid__item">
    <div class="grid__item-text-l">
      <h2>Houston, wir haben ein Problem!</h2>
      <p>
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient einer Seite. Dieser Text dient zum füllen einer Seite. Dieser
        Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
      </p>
      <a href="#">Mehr erfahren</a>
    </div>

    <div class="grid__item-img-r">
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Ein aggressiver Hund.">
    </div>
  </div>

  <div class="grid__item">
    <div class="grid__item-text-r">
      <h2>Sit Happens</h2>
      <p>
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient einer Seite. Dieser Text dient zum füllen einer Seite. Dieser
        Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div class="grid__item-img-l">
      <img class="dummy-img" src="./img/dummy-sit.png" alt="Ein Hund sitzt neben Beinen in zerfetzten Hosen.">
    </div>
  </div>

  <div class="grid__item">
    <div class="grid__item-text-l">
      <h2>Welches Schweinerl hätten S' denn gern?</h2>
      <p>
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient einer Seite. Dieser Text dient zum füllen einer Seite. Dieser
        Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div class="grid__item_img-r">
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Eine Bande verschiedener Hunde.">
    </div>
  </div>

Thanks for your help and apologies if you've solved this issue before.

Solution

  • The key bits you are missing:

    • .grid__item {display: flex;}
    • .grid__item {align-items: center;}
    • .text-left {flex-direction: row;}
    • .text-right {flex-direction: row-reverse;}

    @supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    grid-gap: 20px;
    margin: 20px;
  }
  .grid__item {
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    width: auto;
    min-height: auto;
    padding: 15px;
  }
}

.text-left {
  flex-direction: row;
}

.text-right {
  flex-direction: row-reverse;
}

.text-left>*:first-child, .text-right>*:first-child {
  width: 55%;
}

.text-left>*:last-child, .text-right>*:last-child {
  width: 45%;
}

img.dummy-img {
  height: 300px;
  max-width: 350px;
}
    <div class="main-heading-large">Hundetraining vom Feinsten</div>
<div class="grid">
  <div class="grid__item text-left">

    <div>
      <h2>Ein Korb für alle Fälle</h2>
      <p>
        „Der tut nix!“, hallte es in den frühen Abendstunden an den malerischen Ufern des Starnberger Sees aus der Ferne. Darauf Stille. Im nächsten Augenblick kam „Der“ hochmotiviert und mit Karacho durch die Kurve des Parkweges geschossen. Mit lautem Getöse
        krachte der Foxterrier-Rüde in den angeleinten Hütehund-Neuling, um dem Zottelbär zu zeigen, wo in „seinem“ Park der Hammer hängt. Ergebnis: 1. „Der“ ist nicht erstickt. 2. „Der“ und Halter müssen reden. 3. Für den Diskurs konnte ein Maulkorb
        als Moderator gewonnen werden. Ich zeige Ihnen, welches Modell für Ihren Hund am besten geeignet ist.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div>
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Australian Shepherd mit Osterkorb.">
    </div>
  </div>

  <div class="grid__item text-right">
    <div>
      <h2>Born to lead?</h2>
      <p>
        Feldmanns Leben ist eines der härtesten. Soviel ist sicher. Sein täglicher Wahnsinn beginnt morgens mit einem hochmotivierten Kontrollgang durchs Viertel. Dabei hinterlässt er an zentralen Infotheken Kurzanweisungen für ein gedeihliches Miteinander in
        seinem Revier. Falls nötig, führt er auch Einzelgespräche. Die liebt er besonders. Wieder zu Hause angekommen, reicht ihm seine Küchenhilfe Frühstück. Es folgt ein kurzes Verdauungslauern, denn in herrlicher Unregelmäßigkeit ist im weiteren Tagesablauf
        mit lästigen Störvorfällen zu rechnen. Dann ist Feldmanns strategische Führung gefragt. Das Läuten der Klingel ruft beispielsweise seine Türsteherqualitäten auf den Plan. Tür auf, und es folgt ein distanzloser Bodycheck des Besuchs sowie eine
        grimmige Sitzplatzblockade seiner Sofalandschaft im Wohnzimmer. Da gibt es einfach Grenzen. Seine. Außerdem hat die Küche Gartenblick. Mit dem Einstellen der Bewegungsreize in seinem Umfeld fährt der Master of Desaster runter. Bis zum Ende der
        Besuchszeit. Dann beginnt seine nächste Schicht.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div>
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Ein Rottweiler im Anzug.">
    </div>
  </div>

  <div class="grid__item text-left">
    <div>
      <h2>Houston, wir haben ein Problem!</h2>
      <p>
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient einer Seite. Dieser Text dient zum füllen einer Seite. Dieser
        Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
      </p>
      <a href="#">Mehr erfahren</a>
    </div>

    <div>
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Ein aggressiver Hund.">
    </div>
  </div>

  <div class="grid__item text-right">
    <div>
      <h2>Sit Happens</h2>
      <p>
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient einer Seite. Dieser Text dient zum füllen einer Seite. Dieser
        Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div>
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Ein Hund sitzt neben Beinen in zerfetzten Hosen.">
    </div>
  </div>

  <div class="grid__item text-left">
    <div>
      <h2>Welches Schweinerl hätten S' denn gern?</h2>
      <p>
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
        Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite. Dieser Text dient einer Seite. Dieser Text dient zum füllen einer Seite. Dieser
        Text dient zum füllen einer Seite. Dieser Text dient zum füllen einer Seite.
      </p>
      <a href="#" target="_blank">Mehr erfahren</a>
    </div>

    <div>
      <img class="dummy-img" src="https://via.placeholder.com/400x300" alt="Eine Bande verschiedener Hunde.">
    </div>
  </div>