Android Browser Text Vertical centering problem

Problem description

In development, we often use the Line-height property to achieve vertical center of text, but in the Android browser rendering has a common problem, that is less than 12px font using the Line-height property vertically centered, the rendering effect is not the text vertical center, Instead, it will be biased. Here are two code examples:

1. Greater than 12px

Html

<span>testtesttest</span>  

Css

span {    display:inline-block;    16px;    Background-color:gray;    12px;}   

<!--more--

2. Less than 12px html

<span>testtesttest</span>  

Css

span {    display:inline-block;    16px;    Background-color:gray;    10px;}   

You can see that when the font-size is less than 12px, the use of the Line-height attribute to the vertical center layout is obviously biased, here in order to avoid the font-size is odd caused by the deviation, deliberately font-size are set to an even

Cause of the problem

At first there were two kinds of speculation about this problem, one is that it is a font problem, or a browser rendering problem. But later found that even if the font changed as long as the font-size or less than 12px will appear this problem.

Solutions

The problem is that the font size is less than 12px, so the problem can be solved in this direction, either by changing the font size, or by changing it to a vertical center.

1. The most direct way to change the font size is to change the font size so that it is larger than 12px can be normal center, if the page on the font size requirements are more stringent, you can first include the original font-size, including the properties of twice times, and then scale down one times, This is also possible after the test:

class="Content" >testtesttesttesttest</span>

. content {    display:inline-block;    40px;    Background-color:gray;    0%;}   

But I do not know why, after this method I always feel that the text is not absolutely centered, as if there is a slight lower,

<div  class= "container" >  <span class=  "content" >testtesttesttesttest</ span></DIV>        

. container {    display:table;} . Content {    background-color:gray;    Vertical-align:middle;}   

Using the table layout can be a good way to achieve vertical center text, the disadvantage is to be more than one layer outside the container.

Android Browser Text Vertical centering problem