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    x000D   x000D   lt div class  ui menu  gt  x000D     lt a href  t  class  item  gt  lt i class  large home basic icon  gt  lt  i gt  lt span class  nav-text  gt  Accueil lt  span gt  lt  a gt  x000D     lt a href    class  item  gt  lt i class  large camera retro icon  gt  lt  i gt  lt span class  nav-text  gt  Cr  ations lt  span gt  lt  a gt  x000D     lt a class  item  gt  lt span class  nav-text  gt Qui-suis je  lt  span gt  lt i class  large help basic icon  gt  lt  i gt  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D      Any suggestion to fix it

User · Answer

There are already a few answers here but I found flexbox to be the cleanest and least "hacky" solution:

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

To support Safari < 8, Firefox < 21 and Internet Explorer < 10 (Use this polyfill to support IE8+9) you'll need vendor prefixes:

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

User · Answer

You can use this property   vertical-align middle    selector-class        float left      vertical-align middle

User · Answer

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

User · Answer

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

User · Answer

Using CSS Grid  HTML   lt div class  container  gt       lt i class  fab fa-5x fa-file  gt  lt  i gt       lt span gt text lt  span gt   lt  div gt    CSS   container     display  grid    grid-template-columns  1fr auto    align-items  center      Working example

User · Answer

Add this to your CSS    menu i large icon   menu i large basic icon       vertical-align baseline      DEMO

User · Answer

vertical-align can take a unit value so you can resort to that when needed       display inline-block    vertical-align  5px         display inline-block    vertical-align  -5px

User · Answer

Set line-height to the vertical size of the picture  then do vertical-align middle like Josh said   so if the picture is 20px  you would have    line-height 20px  font-size 14px  vertical-align middle

User · Answer

To expand on Marian Udrea s answer  In my scenario  I was trying to align the text with a material icon  There s something weird about material icons that prevented it from being aligned  None of the answers were working  until I added the vertical-align to the icon element  instead of the parent element  So  if the icon is 24px in height   parent       line-height  24px     Same as icon height      i material-icons       Only if you re using material icons       display  inline-flex        vertical-align  top

User · Answer

to center vertically and horizontally use this   position  absolute  top  50   left  50   transform  translate -50  -50

[html] How to vertically align text with icon font?

Examples related to html

Examples related to css

Examples related to fonts

Examples related to font-awesome