Text is not vertically centered

Question

I use the line-height property to align text with icons in the menu. I created a simplified version (without icons) to illustrate my problem. The problem seems to be related to the overall alignment of the fonts vertically.

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

The code is very simple:

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

Adding style:

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

Here's what it looks like:

And this is how it MUST look:

Why is this happening in new browsers? I tested it on a 64-bit version of Windows 8.1 in Firefox 27.0.

EDIT: I want to know WHY browsers do not display correctly. A small letter like "a" should have the same space above and below "green" when applying a line height whose height is equal to the size of the container. But the rendering is wrong.

EDIT No. 2: a problem with the font. Segoe UI seems to have a weird baseline. When using Arial, Verdana or any other vertical alignment is better (but this is also not ideal). → http://jsfiddle.net/KFxG3/22/

Answer 1

Each browser supports different types of files, because of this, sometimes browsers cannot display font properties as expected, and there is a problem with the line height.

For paid fonts, always add all font extension files to the font / vendor folder and use the following format to add fonts to the stylesheet.

font 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 information, you can refer to the link below: https://css-tricks.com/snippets/css/using-font-face/

Answer 2

JSFiddle!

Remember, if you set a fixed height, and also adjust the font size, line height, then its border should be messy. You either make it a float, or remove the height and allow it to occupy the same height as required, or manually set a higher height, but still the different rendering methods used in different browsers make it difficult for you to maintain the same appearance of the browser, so I suggest a method which I used in JSFiddle.

you can compensate for the difference by indenting.

 padding-bottom: 5px; 

Answer 3

You want to add / change a line-height .

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

Example:

 div{ line-height:16px; } 

Answer 4

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

Although this is different from your requirement, but I think you should practice this way:

Remove line height completely from 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; } 

Script example

Answer 5

div is the wrong element for you in this case. Just try this option 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> 

Answer 6

Browsers are working fine. You may be confused because your font size is 20 pixels smaller than the height of your line, 22 pixels, and it looks like it will fit. But this is not so.

As an example, setting the H1 font size to 24px will create a line height of 39 pixels. A 12px font size will result in a line height of 18px.

Answer 7

Try adding an add-on 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; } 

Answer 8

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

You need to add the line below to your CSS.

  padding-bottom:5px; 

However, this does not mean that the string should "work". As far as I know, the bottom of letters, such as p and q, are not taken into account in the average font height. To get a fairly accurate result, you will have to measure the capital letter.

You do not need div height, by the way, if you do not need what height will be outside.

I would advise you to look into the "box size". To prevent the expansion of the laid element by external dimensions.

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

Answer 9

It looks like 4 years, but sometimes you need to check the box is sized correctly.

 a{ box-sizing: content-box } 

Then your height and line height should center the text.

Answer 10

I know I can be a little late, but better late than never. Yes, you are right - this is a problem with your font, in your case with an ascendant.

To fix this, you need to change the typo (in some other cases).

One solution for Mac users:
"To edit them in a font, you need to download the Apple Font Tool Suite . After installation, you need to open the terminal and go to the directory containing 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 in a text editor, and adjust the values ​​for ascender and descender. Generally, if your font is too low, you want to reduce and enlarge it. After editing and saving, enter the following command in the terminal to restore the Font file:

ftxdumperfuser -t hhea -A f font.ttf

Now you can use the font.ttf file in your application. If the font is still incorrect, just repeat the above procedure until you are happy. "- Source: Andy Yardley

Answer 11

You apply a specific height to the div and line-height. You do not need anything to center vertical text.

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

Example: http://jsfiddle.net/KFxG3/2/

Answer 12

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

you need to add to your css

Answer 13

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

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

CSS

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