返回

提供微商城·微分销·小程序开店需求

5分钟开通你的微信商城店铺!
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

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

2020-09-27 作者:黄珊


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

  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;

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

推荐文章

小程序开店 社区团购 门店开店 免费注册