小米浏览器,uc移动浏览器兼容问题

发布于 2022-09-06 23:06:29 字数 748 浏览 5 评论 0

小米浏览器,uc移动浏览器兼容问题如图
图片描述
价格的¥在苹果和安卓其他浏览器都能垂直居中,把小米和uc设置垂直居中,在其他浏览器不垂直居中在小米和uc浏览器不居中偏下,怎么改让所有浏览器都居中

图片描述

css
.price{font-size:22px;color:#F79200;text-align:center;width:90px;margin:0 auto;height:30px;position:relative;padding-left:6px;}
.price .pricon{width:16px;height:16px;text-align:center;line-height:16px;border:1px solid #F79200;color:#F79200;-webkit-border-radius:50%;border-radius:50%;font-size:12px;/ /position:absolute;left:-5px;top:50%;transform:translateY(-50%);}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

遗心遗梦遗幸福 2022-09-13 23:06:29

HTML:

<div class='price'>
    <p>59800</p>
</div>

CSS:

.price {
    position: relative;
    height: 1.5em;
}
.price > p {
    font-size: 1.2em;
    color: #F79200;
    padding-left: 1.5em;
    font-weight: bold;
}
.price::before {
    content: '¥';
    display: block;
    position: absolute;
    left: 0;
    top: .3em;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border: 1px solid #F79200;
    color: #F79200;
    border-radius: 50%;
    font-size: .8em;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文