​

When using line-height= container height to achieve vertical center of text on mobile terminals, the text will be found to be tilted on Android phones. Xiaobian summarizes two reasonable and simple solutions;

On the rendering

​

From the above renderings, you can see that the text in “Button 3” has a slight upward offset (different font size and browser offset).

Xiaobian feel flex scheme and padding scheme is relatively simple and reasonable, the following is the source code. There are advantages and disadvantages and special attributes of the source code;

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style type="text/ CSS "> /* BTN {height: 32px; background-color: #0089FF; border-radius: 16px; text-align: center; font-size: 14px; color: #fff; width: 120px; } /* horizontal */ hr{height: 0; border: none; border-top: #ddd solid 1px; margin: 10px; } /* flex */. Flex {line-height: normal; /* display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; Align -content: center} /* padding scheme */. Padding {line-height: normal; /* set height to normal */ height: auto; /* Padding: 7px; /* Fill in a value that is similar to the design draft. It is not as accurate as the Flex solution, but it is simpler. */} </style> </head> <body> <div class=" BTN flex"> </div> <hr> <div class=" BTN padding"> </div> <hr> <div class="btn" style="line-height: 32px;" </div> </body> </ HTML >Copy the code

Author: Huanghe Ailang QQ: 1846492969, email: [email protected]

This article is original, copyright belongs to the author, please indicate the original link and source.