垂直居中/对齐图像 div 与 css 网格中的相邻文本 div

Question

可能在这里遗漏了一些东西，但我已经尝试了两天来调整它并浏览了 + 尝试了几乎所有我可以在 stackoverlow 等上找到的关于它的东西。

我在一个网站上有一个 CSS 网格，其中包含（每个网格项）一个文本 div 和一个 img div。 我试图保持 img 相对于文本垂直居中。

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

如果您以前解决过这个问题，感谢您的帮助和道歉。

Answer 1

您缺少的关键位：

• .grid__item {显示：弹性；}
• .grid__item {对齐项目：中心；}
• .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>