如下方代码,在电脑浏览器中及手机微信中都可在屏幕中水平居中显示,但是在手机UC浏览器中不行:
求教大佬是哪方面的问题呢,有没有什么避免的方法!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="leichen.ltd">
<title>测试标题</title>
</head>
<body style="text-align:center;">
<!--这部分手机UC访问出现问题-->
<h1>ddd</h1>
<h1>实战践行、开疆拓野</h1>
<h1>新世纪、新挑战、新未来</h1>
<!--这部分手机UC访问出现问题-->
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="leichen.ltd">
<title>测试标题</title>
</head>
<body>
<!--这部分手机UC访问出现问题-->
<h1 style="text-align:center;">ddd</h1>
<h1 style="text-align:center;">实战践行、开疆拓野</h1>
<h1 style="text-align:center;">新世纪、新挑战、新未来</h1>
<!--这部分手机UC访问出现问题-->
</body>
</html>
这样就好了,h1是块元素
试一下,我也很久没试过了 < meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
< meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />用这个方法
一个原因可能是 text-align: center;
样式 h1 没有继承下来。 可以新写一个 calss 来给每个 h1 ,参考代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="leichen.ltd">
<title>测试标题</title>
<style>
.center {
text-align:center;
}
</style>
</head>
<body>
<!--这部分手机UC访问出现问题-->
<h1 class="center">ddd</h1>
<h1 class="center">实战践行、开疆拓野</h1>
<h1 class="center">新世纪、新挑战、新未来</h1>
<!--这部分手机UC访问出现问题-->
</body>
</html>