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

You can use this property : vertical-align:middle;

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

Answer 2

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

Answer 3

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

Answer 4

Add this to your CSS:

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

DEMO

Answer 5

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

Answer 6

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