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.

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

The code is really simple:

 <div>qb - Some text - qb</div>

An adding a style:

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

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 in Firefox 27.0.

EDIT: I want to know, WHY the browsers does 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 thats as height as the container. But the rendering is wrong.

EDIT#2: It's an issue with the font. Segoe UI seems to have a strange baseline. When using Arial, Verdana or whatever vertical alignment fits better (but it's also not perfect). -> http://jsfiddle.net/KFxG3/22/

回答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/

回答2:

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;

回答3:

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

回答4:

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

回答5:

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
  <span class="top"></span>
  <span class="mid"></span>
  <span class="bot"></span>
  <span class="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.

回答6:

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

回答7:

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.

回答8:

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>

回答9:

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

回答10:

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.

回答11:

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/

回答12:

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

回答13:

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

you have to add in your css

回答14:

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.

来源：https://stackoverflow.com/questions/21580059/text-is-not-vertically-centered

标签

html

css