與顯示塊和範圍垂直對齊

Question

我想在背景上安排一個帶有背景的文本（用於顯示塊的範圍），該文本應該在img底部垂直對齊。

不幸的是，垂直對齊只適用於內聯元素，而不適用於塊。 在父級上使用行高進行垂直對齊也不起作用，因爲背景跨越了整個塊。

任何想法/解決方法？

.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

您可以使用柔性此。

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