Question

我遇到了奇怪的行为。假设您有一个div包含文本，并且希望文本垂直居中。为此，您可以将容器的height和line-height设置为相同的值。一切都很棒。

但是现在您决定将图标（通过图标字体）添加到混合中。并且您希望此图标比文本大得多。应该没有问题。只需添加span或i并将font-size设置为所需的值即可。应该管用。

但事实并非如此。现在，文本突然挂在靠近底部的位置。直到您将图标font-size更改为与容器元素相同为止。

这是怎么回事？

#container {
  line-height: 30px;
  height: 30px;
  font-size: 15px;
  border: 1px solid black;
}

#icon {
  font-size: 30px;
}

#icon2 {
  font-size: 15px;
}

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/>
<div id="container">
  Centered Text
</div>

<div id="container">
  <span id="icon"><i class="fas fa-arrows-alt-v"></i></span>
  Centered Text
</div>

<div id="container">
  <span id="icon2"><i class="fas fa-arrows-alt-v"></i></span>
  Centered Text
</div>

Answer 1

下面，我使用flexbox进行对齐。这样，我就不必照顾高度和/或线条高度。

#container {
  font-size: 15px;
  border: 1px solid black;
  display: flex;
  align-items: center; /* Vertical alignment */
}

#icon {
  font-size: 60px;
}

#icon2 {
  font-size: 30px;
}

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/>
<div id="container">
  Centered Text
</div>

<div id="container">
  <span id="icon"><i class="fas fa-american-sign-language-interpreting"></i></span> Centered Text
</div>

<div id="container">
  <span id="icon2"><i class="fas fa-american-sign-language-interpreting"></i></span> Centered Text
</div>

Answer 2

所有文本都对齐到容器的底部。当您的图标变大时，它使容器变大，其余文本则与底部保持对齐。

您要做的是将图标设置为与容器的中间垂直对齐：

#icon {
    vertical-align: middle;
}

#container {
  line-height: 30px;
  height: 30px;
  font-size: 15px;
  border: 1px solid black;
}

#icon {
  font-size: 30px;
  vertical-align: middle;
}

#icon2 {
  font-size: 15px;
}

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet" />
<div id="container">
  Centered Text
</div>

<div id="container">
  <span id="icon"><i class="fas fa-arrows-alt-v"></i></span> Centered Text
</div>

<div id="container">
  <span id="icon2"><i class="fas fa-arrows-alt-v"></i></span> Centered Text
</div>

更通用的解决方案：

#container > span {
  vertical-align: middle;
}

#container {
  line-height: 30px;
  height: 30px;
  font-size: 15px;
  border: 1px solid black;
}

#container > span {
  vertical-align: middle;
}

#icon {
  font-size: 30px;
}

#icon2 {
  font-size: 15px;
}

<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet" />
<div id="container">
  Centered Text
</div>

<div id="container">
  <span id="icon"><i class="fas fa-arrows-alt-v"></i></span> Centered Text
</div>

<div id="container">
  <span id="icon2"><i class="fas fa-arrows-alt-v"></i></span> Centered Text
</div>

CSS：div中的图标/跨度可防止文本在垂直中心对齐。如何解决这个问题？

2 个答案: