How to vertically align text with icon font?

Question

I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text:

相关标签:

Answer 1

Using CSS Grid

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;
}

Working example

Answer 2

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

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

---

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

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

Answer 3

to center vertically and horizontally use this:

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

Answer 4

Adding to the spans

vertical-align:baseline;

Didn't work for me but

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

did work (tested on Chrome)