Text Is Not Vertically Centered

I'm using the line-height property to align some text to icons in a menu. I've created a simplified version (without icons) to illustrate my problem. It seems to be a problem with

Solution 1:

Each browser support different type of file format because of this sometimes browsers are not able to render the font properties as expected and line-height issue occurs.

For paid fonts always add all the font extension files to your fonts/vendors folder and use the below format to add fonts in your stylesheet.

font-face format:

@font-face {
         font-family: 'MyWeb';
         src: url('webfont.eot'); /* IE9 Compat Modes */src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('webfont.woff2') format('woff2'), /* Super Modern Browsers */url('webfont.woff') format('woff'), /* Pretty Modern Browsers */url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

For more details you can refer below link: https://css-tricks.com/snippets/css/using-font-face/

Solution 2:

I know I might be a little late, but better late than never. Yes you're right - it's an issue with your font, in your case the ascender.

To fix this you need to change your typo's ascender (in some other cases descender).

One solution Mac Users: "To edit these in the font you will need to download the Apple Font Tool Suite. Once you’ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:

ftxdumperfuser -t hhea -A d font.ttf

This will create a file called font.hhea.xml, open this new file into a text editor and adjust the values for ascender and descender. Generally if you font sits too low you want to decrease ascender and increase descender. After editing and saving enter the following command into terminal to reconstruct your Font file:

ftxdumperfuser -t hhea -A f font.ttf

You can now use the font.ttf file in your application. If the font still isn’t right just repeat the above procedure until you are happy." - Source: Andy Yardley

Solution 3:

JSFiddle!

Remember if you are setting a fixed height, and also adjusting the font size, line height, then its bound to be messy. You either make it a float and remove the height and let it occupy as much height as it needs or manually set a larger height, but still the different techniques of rendering used b different browsers would make it difficult for you to maintain same look cross browser. so I suggest the method I used in the JSFiddle..

you may then compensate for the difference by applying a padding.

padding-bottom: 5px;

Solution 4:

This is not an answer, this is just a comment (I can't comment, because my reputation is not enough).

Year passed, but the problem is still here... Hope, we will find an answer someday.

I've tried to investigate this a little. Here is jsfiddle with updated original question: link.

I've added 4 horizontal lines to understand the font dimensions: top, middle, bottom, baseline:

<div>
  qb - Some text - qb
  <spanclass="top"></span><spanclass="mid"></span><spanclass="bot"></span><spanclass="base"></span></div>

div {
    background-color: #9F9;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    font-family: 'Verdana', 'Arial';
}
span {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: red;
}
span.mid {
  vertical-align: middle;
}
span.top {
  vertical-align: top;
}
span.bot {
  vertical-align: bottom;
}
span.base {
  vertical-align: baseline;
}

As a result we can see the difference between Chrome/Win10 and FireFox/Ubuntu:

In Ubuntu I have baseline (and middle line) for some fonts 1px higher than on Windows.

Looking to other answers (and using my experience), I can say:

• padding will not help
• vertical-align:middle will not help
• changing original div to display:flex;justify-content:center (having inner text wrapped in span or div) will not help
• changing original div to display:table (having inner text wrapped in display:table-cell) will not help
• changing outer div to span will not help
• box-sizing will not help

All the options above I've checked and they do not work: we always have text 1px higher in Ubuntu, than on Windows.

Maybe it will help someone.

Solution 5:

You want to add/change a line-height.

To get the q and b in the middle, use line-height:16px; however the some text will look dodgy. Mess around with the 16px; and you might find what you want.

Example:

div{
    line-height:16px;
}