垂直居中/對齊圖像 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>