垂直对齐材料图标

Question

我正在尝试在导航菜单中垂直对齐我的“下拉箭头”。

我已经尝试了各种方法，例如vertical-align: middle、display: inline-block等，但都没有什么帮助。http://img02.imgland.net/jfCmDoW.png

HTML代码如下：

  <li>
    <a href="#!" data-activates="dropdown1">English
      <i class="material-icons">arrow_drop_down</i>
    </a>
  </li>

我创建了一个JSFiddle示例来展示这个问题：https://jsfiddle.net/dbwaoLrh/

非常感谢对我在使用materialize框架时，使用“自定义”字体大小遇到的问题进行解释。

- kentor

---

如果您不需要支持IE8，请使用flexbox。 - hdotluna

“i”标签用于斜体文本。对于图标，请使用“span”或“div”。在这种情况下，您可能想要使用“span”。 - osiris

Answer 1

你可能尝试了各种样式来排列你的图标，但是你需要针对以下标签进行目标定位并进行样式设置。

.footer-links > li > a > i{
  vertical-align:middle;
} 

看看这个 两个 jsFiddle，我给其中一个添加了background只是为了方便理解。

https://jsfiddle.net/dbwaoLrh/2/

https://jsfiddle.net/dbwaoLrh/4/

- frnt

---

我已经检查过了，但它仍然没有居中对齐：http://img02.imgland.net/ZdETceM.png - kentor

@kentor 只需添加 margin-top:-1px，即可使其更居中。但正确的方法应该是使用 vertical-align。 - frnt

我现在使用了vertical-align: bottom，这样似乎更好。我认为你的建议是最好的方法，因此我已经接受它作为答案。谢谢！ - kentor

Answer 2

.material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

- silver_mx

---

最初跳过了这个答案，因为它没有赞。然后结果发现这是唯一有效的答案。赞！ - Vajk Hermecz

如果您要将其与文本并排放置，则还可以将该CSS放在父容器上。 - Andrei

Answer 3

试试这个

.material-icons {
    vertical-align: 1px; /*Change this to adjust the icon*/
}

第二个选项是您可以使用的:

.material-icons {
    position: relative;
    top: 1px; /*Change this to adjust the icon*/
}

你做错的事情

这里有一个icon的CSS规则: font-size:24px，它比父级锚点元素更大，行高为1，因此产生的行高为24px; 这就是为什么它不起作用的原因。如果你想要，你可以使用自己的代码，只需要将行高改为与父级锚点元素相等，并对图标使用vertical-align:middle。

请参见Js Fiddle

- Rakesh Soni

Answer 4

你应该为.material-icons添加vertical-align: middle;规则：

.material-icons {
  vertical-align: middle;
}

- Rohit Sharma

Answer 5

我知道这是一个老问题，但我发现这种解决方案在每个行高上都能更好地工作：

        .material-icons {
            vertical-align: middle;
            line-height: 1px;
        }

- Henry

Answer 6

我使用了Font Awesome字体，为了与Material Font保持完全相同的垂直对齐方式，我设置了以下CSS样式并且它能够完美对齐。

.material-icons {
vertical-align: middle;
padding-bottom: 3px }

已在Firefox，Chrome，InternetExplorer和Edge中进行了测试。

- DavidLyonsGarcia

Answer 7

MUI图标默认不会继承字体大小。因此，它的对齐会出现问题。

如果使用React，您可以添加fontSize="inherit"。

在这个例子的fiddle中，您可以添加.material-icons.material-icons { font-size: 13px; }来修复对齐问题，尽管这显然不是一个很好的解决方法。

如果您确实想要一个更大的图标，其他答案会解释如何对齐，但最终导致对齐问题的原因是字体大小的差异。

- Roman Starkov