search

Home  >  Q&A  >  body text

前端 - 使用rem设置height和line-height相同时文字没有居中?

demo在这里:
http://jsbin.com/fihikoheno/edit?html,css,js,output
http://output.jsbin.com/fihikoheno

在安卓手机上会出现这种情况,pc没有任何问题?(ios没有测试)

不知问题出在哪?

<!DOCTYPE html>
<html style="font-size:14px;">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p>哈哈</p>
</body>
</html>

*{padding:0;margin:0;}
p{
  width:30px;
  height:1.2rem;
  line-height:1.2rem;
  background:red;
  font-size:10px;
  color:#fff;
  text-align:center;
}
PHPzPHPz2863 days ago1050

reply all(7)I'll reply

  • 大家讲道理

    大家讲道理2017-04-17 11:47:14

    The display problem below 12px can be solved by enlarging the whole first and then reducing it with css3

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:47:14

    There’s no way around it. Each browser renders line-height differently, not just line-height. In fact, when writing a vertically centered layout, it doesn’t matter whether you use postion or box layout. , cannot and cannot be absolutely centered on all machines

    reply
    0
  • 黄舟

    黄舟2017-04-17 11:47:14

    I agree with the answer above. You can center it normally if you set the font to 12px or above. I did it this way before

    reply
    0
  • 迷茫

    迷茫2017-04-17 11:47:14

    Our height is written the same as the row height, it should be 14*1.2 = 16.8; both the height and row height should be 16.8

    However, we see that the results of the two are different under chrome, indicating that the rendering of the two is different. And browsers handle decimal points differently, so I guess there should be an error. If you want to achieve vertical centering, don't write the height and row height. Just use the same padding value for the top and bottom. In this way, even if there are decimals, they will be omitted and become the same.

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:47:14

    The simulator on the PC simulates a vertically centered view, but in actual mobile phones, the Apple phone renders it vertically centered, while the Android phone renders it higher. The compatible method is not to set the height. Set line-height to 1 and use equal padding values ​​to maintain vertical centering.

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 11:47:14

    Let me ask first, did you open it in the WeChat browser? WeChat has this bug

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:47:14

    This happens when the font size is too small. I have also encountered it. It is not completely centered

    reply
    0
  • Cancelreply