How to vertically align text with icon font?

Fractaliste

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:

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

enter image description here

Any suggestion to fix it?

Josh Crozier

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

How to center text vertically with a large font-awesome icon?

From Java

How do I vertically align text in a div?

From Java

How to align View vertically to the text inside TextView?

From Java

How to vertically align all text in CSS?

From Dev

How to align list Items with font-awesome icon next line text?

From Dev

How to vertically align bootstrap buttons with text in a row?

From Dev

How to Vertically Align Text Using UILabel and NSAttributedString

From Dev

How to vertically align a 'span' in a 'div' with icon present?

From Dev

How to align text horizontally & vertically in UITextView?

From Dev

How to Vertically "center" align the multi line text

From Dev

How to vertically align text in the middle of two divs

From Dev

How to vertically align text in a TextView with Compound Drawable

From Dev

Vertically align text with different font sizes

From Dev

How to position font awesome icon vertically

From Dev

vertically align font awesome icon in td with variable height

From Dev

How to vertically align text in a definition list?

From Dev

Align icon vertically to the center of the first line of text

From Dev

How to align vertically span text (floated) to bottom

From Dev

How to align text in middle (vertically)

From Dev

How to vertically align an icon next to text in Bootstrap 3

From Dev

How to vertically align an icon inside a span

From Dev

How to align text vertically equal top CSS

From Dev

How to vertically align icon font

From Dev

How to align text vertically?

From Dev

Align text and icon-font icon in span at center of parent div

From Dev

QPushButton: How to align icon and text

From Dev

Align vertically Icon and TextInput

From Dev

How to align text vertically in JavaFX?

From Dev

Bootstrap 4 align Font Awesome icon horizontally and vertically

Related Related

  1. 1

    How to center text vertically with a large font-awesome icon?

  2. 2

    How do I vertically align text in a div?

  3. 3

    How to align View vertically to the text inside TextView?

  4. 4

    How to vertically align all text in CSS?

  5. 5

    How to align list Items with font-awesome icon next line text?

  6. 6

    How to vertically align bootstrap buttons with text in a row?

  7. 7

    How to Vertically Align Text Using UILabel and NSAttributedString

  8. 8

    How to vertically align a 'span' in a 'div' with icon present?

  9. 9

    How to align text horizontally & vertically in UITextView?

  10. 10

    How to Vertically "center" align the multi line text

  11. 11

    How to vertically align text in the middle of two divs

  12. 12

    How to vertically align text in a TextView with Compound Drawable

  13. 13

    Vertically align text with different font sizes

  14. 14

    How to position font awesome icon vertically

  15. 15

    vertically align font awesome icon in td with variable height

  16. 16

    How to vertically align text in a definition list?

  17. 17

    Align icon vertically to the center of the first line of text

  18. 18

    How to align vertically span text (floated) to bottom

  19. 19

    How to align text in middle (vertically)

  20. 20

    How to vertically align an icon next to text in Bootstrap 3

  21. 21

    How to vertically align an icon inside a span

  22. 22

    How to align text vertically equal top CSS

  23. 23

    How to vertically align icon font

  24. 24

    How to align text vertically?

  25. 25

    Align text and icon-font icon in span at center of parent div

  26. 26

    QPushButton: How to align icon and text

  27. 27

    Align vertically Icon and TextInput

  28. 28

    How to align text vertically in JavaFX?

  29. 29

    Bootstrap 4 align Font Awesome icon horizontally and vertically

HotTag

Archive