时间戳

首页 > 解决方案 > CSS：div 中的图标/跨度防止文本垂直居中对齐。如何解决这个问题？

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

问题描述

我遇到了一个奇怪的行为。假设您有一个div包含文本并且您希望文本垂直居中。为此，您可以将容器的heightand设置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>

标签： htmlcss

解决方案

下面我使用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>

推荐阅读