首页
学习
活动
专区
工具
TVP
发布

小程序内的居中显示

小程序-水平垂直居中

1.flex流布局

使用属性:

justify-content:center;

align-items:center;

*/justify-content 决定项目在主轴上的对齐方式

align-items 决定项目在交叉轴上的对齐方式

改变布局的横纵轴后控制水平和垂直对齐方式的属性改变,但控制主轴或交叉轴的对齐方式的属性不改变。*/

2.一般布局,或者modal模态弹出框

使用属性:

vertical-align: middle;

align-items: center;

使用属性:

text-align:center;

align-items:center;

*text-align为水平对齐方式。用于块级元素上,设置块级元素的内联元素的对齐方式。

3.块级元素

width:400px;

margin-left:auto;

margin-right:right;

设置元素的宽度值,并令左右外边距值为auto,浏览器会自动为其分配相同的左右外边距值,使其居中显示。

4.图片居中

方法1.将放置图片的容器的布局改为

display: table-cell;

text-align: center;

可以使容器内的元素均居中显示

如果需要水平垂直居中,添加

display: table-cell;

text-align: center;

vertical-align: middle;

欢迎大家测试

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200520A03V0500?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券