返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
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步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用