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

您可以使用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>

垂直对齐显示块和跨度

1 个答案: