177-371-24501(同微信)

小程序文字水平居中如何实现

2022-04-21 管理员


       小程序文字设置除了上下居中,还有水平居中,那么应该如何实现。

  1:【内联元素】文本居中:text-align:center(不解释)

  可行性分析:一个盒子内部的文字、元素(有固定宽度)的居中问题他是可以解决的。

  那么条件不够呢?

  没条件就要创造条件嘛!没有wrap就包一个嘛!没有宽度就定下来嘛!别矫情。问题总是可以解决的。

  2:【定宽块元素】自动水平外边距:margin:0 auto;(更加不想解释)

  0:垂直方向margin可变值,表示margin-top、margin-bottom两个的值,如果设置的话,二者一样。如果不想二者一样,可以在auto后再设置一个:margin: Apx auto Bpx;

  auto:水平方向margin,auto就是自动,也算是让css自动计算距离左右的位置吧,

  可行性分析:必须要元素定宽,即要设置宽度值。

  3:【需要定宽】绝对定位+外边距:position:absolute;left:50%;margin-left: -Bpx;(B是元素的宽度/2的值)(更加不想解释)

  有个盒模型,他有自己的宽度高度、又是绝对定位。这种情况,想让他水平居中的话用text-align与margin:0 auto;的方法都是不可取的。毕竟absolute已经飞起来了,脱离了文档流,任何限制都对他没有作用了。但是,好处是不管他以前什么属性,用了absolute之后就可以设置宽高。所以就有了解决办法。

  .box{

  position: absolute;

  top: -15px;

  left: 50%;

  width: 30px;

  height: 30px;

       小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

上一篇:微信小程序模拟聊天,微信小程序仿微信聊天界面
下一篇:小程序初始化配置指引,小程序服务器域名配置
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
快速提升网站排名的方法
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话(微信同号)

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持:酷微科技

电话咨询 在线咨询 服务项目 SEO优化