CODEWITHSUNDEEP
htmlcss
SuperNova
SuperNova

Reputation: 3022

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 the general vertical alignment of fonts.

The code is really simple:

div {
  background-color: green;
  height: 22px;
  line-height: 22px;
  font-size: 20px;
  font-family: 'Segoe UI', 'Verdana', 'Arial';
}
<div>qb - Some text - qb</div>

You can see this problem on JSFiddle as well: http://jsfiddle.net/KFxG3/1/

This is how it looks like:

This is how it looks like

And this is how it should look like:

And this is how it SHOULD look like

Why does this happen in newer browsers? I've tested it on Windows 8.1 64 bit with Firefox 27.0.

I want to know, why the browsers do not render correctly. A small letter like 'a' should get the same space to the top and bottom of the 'green', when applying a line-height that's the same height as the container. But the rendering is wrong.

Upvotes: 30

Views: 46184

Answers (17)

Theo Kekatos
Theo Kekatos

Reputation: 309

I had the same problem with a paid font. After a bit of research, I found this tool → https://transfonter.org/ . Just, upload your fonts, and don’t forget to change to “on” the option “Fix vertical metrics”.

After this, download the new fonts and replace them with your previous ones.

Upvotes: 30

Seth Falco
Seth Falco

Reputation: 630

This is similar to another question, which I have provided an answer there:

I encountered the same problem, but with Nimbus Sans instead… I was able to resolve it by using @font-face and setting ascent-override: 100% when loading the font.

— Wrong vertical align of text in Google Chrome browser

It may help to load the font via the @font-face atrule, and set the ascent-override and descent-override properties.

For example:

/* Fix inconsistent ascent across browsers. */
@font-face {
  font-family: "Segoe UI";
  src: local("Segoe UI");
  /* set ascent-override and decent-override */
}

Firefox and Chromium-based browsers handle typeface vertical metrics differently, by explicitly overriding the ascent/descent, this should bring some consistency to the alignment.

See runnable code snippets where I answered the other question.

Upvotes: 5

Anton
Anton

Reputation: 2703

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 {
  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;
}
<div>
  qb - Some text - qb
  <span class="top"></span>
  <span class="mid"></span>
  <span class="bot"></span>
  <span class="base"></span>
</div>

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

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.

Upvotes: 2

Haim
Haim

Reputation: 338

I have faced the same issue, I tried to fix the font but I couldn't do it automatically.
I ended up having a set up like this -

<div style="height:someHeight">
 <div style="font-size:someHeight">
  Text Text Text Text
 </div>
</div>

This works perfectly for me as the excess padding as at the bottom

Upvotes: 0

Tom
Tom

Reputation: 4033

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

Upvotes: 8

Paurnima Partole
Paurnima Partole

Reputation: 71

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/

Upvotes: 4

David Gilliam
David Gilliam

Reputation: 172

This is like 4 years late, but sometimes you have to check if the box-sizing is correct.

a{
  box-sizing: content-box
}

Then your line-height and height should center the text.

Upvotes: -1

GRowing
GRowing

Reputation: 4717

I suppose this is what you are looking for: http://jsfiddle.net/KFxG3/19/

You need to add below line to your CSS.

 padding-bottom:5px;

However that is not the way line height "should" be working. To my knowledge the bottom of letters like p and q is not considered into the median height value of the font. You would have to measure against a capital letter to get a fairly accurate result.

You don't need div height by the way, unless it matters to you what height the element will be on the outside.

I'd suggest you look into "box-sizing" too. To prevent padded element from expanding outside dimensions.

Also, using old browsers as a measure of right and wrong ways to do things is probably not the safest approach to coming to any CSS related conclusions.

Upvotes: -1

Connor
Connor

Reputation: 3

Try adding padding to your code.

Example:

div {
     background-color: green;
     height: 22px;
     line-height: 22px;
     font-size: 20px;
     font-family: 'Segoe UI', 'Verdana', 'Arial';
     padding: 5px 0;
}

Upvotes: 0

Vikas Gautam
Vikas Gautam

Reputation: 978

vertical-align: middle;
padding-bottom:5px;

you have to add in your css

Upvotes: -3

Franziska
Franziska

Reputation: 115

div is the wrong element for you in this case.. Just try this one and compare:

span {
    background-color: green;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    font-family:'Segoe UI', 'Verdana', 'Arial';
}

div {
    background-color: green;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    font-family:'Segoe UI', 'Verdana', 'Arial';
}

And

<span>qb - Some text - qb|ÜÄÖ</span>
<br><br>
<div>qb - Some text - qb|ÜÄÖ</div>

Upvotes: 0

Kuzgun
Kuzgun

Reputation: 4737

Browsers act normal. You may be confused because your font size, 20px is smaller than your line height, 22px and it seems like it is going to fit in. But it won't.

As an example, setting a H1's font-size to 24px would produce a line-height of 39px. 12px font-size would result in an 18px line-height.

Upvotes: 0

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

Here is the updated fiddle http://jsfiddle.net/KFxG3/16/

You need to remove the height element. the div calculates the height according to the font size.

css

div{
    background-color: green;
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}

Upvotes: -2

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

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;

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You can wrap your text portion into another <div> and can try display:table and display:table-cell approach with verical-align:middle

Though this is different from your requirement but i think you should practice this way:

Remove line-height completely from the parent

HTML

<div class="container"><div class="content">qb - Some text - qb</div></div>

CSS

.container {
    background-color: green;
    height: 55px;
    display:table; // here it is
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}
.content{
    display:table-cell; // here it is
    vertical-align:middle;
}

Fiddle Example

Upvotes: 0

Albzi
Albzi

Reputation: 15609

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

Upvotes: 0

Vangel Tzo
Vangel Tzo

Reputation: 9313

You apply specific height to div and line-height .. you don't need any of that to center vertical a text.

div {
    background-color: green;
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}

An example : http://jsfiddle.net/KFxG3/2/

Upvotes: -2

Related Questions