Question

我试图将div中的跨度居中对齐，该div中还包含img元素。

.element {
  display: inline-block;
}

.element img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-right: 20px;
}

.element span {
  display: inline-block;
}

<div class="element">
  <img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <span>hello</span>
</div>

或查看此fiddle

但是，文本不会垂直对齐。我主要看过这个question。但是vertical-align: middle在这里什么也不做。

我也看了这个question。但是，我宁愿避免使用任何position: relative和position: absolute解决方法。我也尝试过把line-height弄乱了。

我什至试图按照这个question的建议在跨度上设置height: 100%，但这也不起作用。

我基本上在SO上看了一堆问题，似乎CSS非常奇怪，这样的简单事情基本上有12种方法。然而，我似乎无法让其中的1个人在我的场合工作。

此行为是怎么回事？

编辑：

标记为与How to Vertical align elements in a div?重复的内容-我已经说明，对于我来说，这些具有行高和垂直对齐方式的解决方案在原始情况下不起作用。接受的解决方案在这种情况下不起作用。如何复制？

Answer 1

这里的答案可能是使用flexbox。如果您的弹性方向是row（默认设置），则可以使用align-items将元素垂直居中，而justify-content则可以使该行向左对齐（该行的“开始” flex容器）。让我知道您是否有任何疑问！

.element {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.element img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-right: 20px;
}

.element span {
  display: inline-block;
}

<div class="element">
  <img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <span>hello</span>
</div>

Answer 2

为此使用flexbox。样本：

.element {
   display: flex;
   align-items: center;
}

使用align-items: center进行垂直对齐，如果还需要水平对齐中心，请使用justify-content: center;。

将div中的范围与img元素居中对齐

2 个答案: