如何將文本與圖標字體垂直對齊？

Question

我有一個非常基本的 HTML，它混合了純文本和圖標字體。 問題是圖標沒有完全呈現在與文本相同的高度：

 <div class="ui menu"> <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a> <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a> <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a> </div>

有什么建議可以解決嗎？

Answer 1

在這種情況下，由於您使用的是inline級元素，因此您可以將vertical-align: middle添加到span元素以實現垂直居中：

.nav-text {
  vertical-align: middle;
}

---

或者，您可以將父元素的display設置為flex並將align-items設置為center以實現垂直居中：

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

Answer 2

這里已經有一些答案，但我發現 flexbox 是最干凈、最不“hacky”的解決方案：

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

要支持 Safari < 8、Firefox < 21 和 Internet Explorer < 10（使用此 polyfill支持 IE8+9），您需要供應商前綴：

parent-element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

Answer 3

vertical-align可以采用單位值，因此您可以在需要時使用它：

{
  display:inline-block;
  vertical-align: 5px;
}

{
  display:inline-block;
  vertical-align: -5px;
}

Answer 4

將此添加到您的 CSS 中：

.menu i.large.icon,
.menu i.large.basic.icon {
    vertical-align:baseline;
}

演示

Answer 5

將line-height設置為圖片的垂直大小，然后像 Josh 說的那樣做vertical-align:middle 。

所以如果圖片是20px ，你會有

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}

Answer 6

垂直和水平居中使用這個：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Answer 7

擴展Marian Udrea的回答：在我的場景中，我試圖將文本與材料圖標對齊。 材質圖標有些奇怪，無法對齊。 在我將vertical-align添加到圖標元素而不是父元素之前，沒有一個答案有效。

因此，如果圖標的高度為24px ：

.parent {
    line-height: 24px; // Same as icon height

    i.material-icons {  // Only if you're using material icons
      display: inline-flex;
      vertical-align: top;
    }
}

Answer 8

添加到跨度

vertical-align:baseline;

對我不起作用，但

vertical-align:baseline;
vertical-align:-webkit-baseline-middle;

確實有效（在 Chrome 上測試）

Answer 9

使用 CSS 網格

HTML

<div class="container">
    <i class="fab fa-5x fa-file"></i>
    <span>text</span>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

工作示例

Answer 10

你可以使用這個屬性： vertical-align:middle;

.selector-class { 
    float:left;
    vertical-align:middle; 
}