與顯示塊和跨度垂直對齊

Question

我想在整行上排列一個帶有背景的文本（使用帶顯示塊的跨度），它應該垂直對齊在底部的 img 旁邊。

不幸的是，垂直對齊僅適用於行內元素，不適用於塊。 在父級上使用 line-height 進行垂直對齊也不起作用，因為背景然后跨越了整個塊。

任何想法/解決方法？

 .block { background: #324234; display: block; text-align: left; } .image { background: white; vertical-align: bottom; }

 <h2> <img class="image" src="background-x" width="100" height="100" align="left" /> <span class="block">We do stuff</span> </h2>

Answer 1

您可以為此使用 flex。

 .block { background: #324234; display:block; text-align: left; flex-grow:1; margin:0; } .image { background: white; vertical-align: bottom; } h2{ border:1px solid green; display:flex; align-items:flex-end; }

 <h2> <img class="image" src="background-x" width="100" height="100" /> <span class="block">We do stuff</span> </h2>