麻烦帮我测试一下我这代码哪里错误了,导致盒子不能居中

来源:16-11 章节扩展(可选观看2)小程序的自适应单位RPX精讲

JIANGYUHANG

2019-04-08

<view class='main'>
<image src='/images/胡歌.jpg' class="image"></image>
<text class="word">hello world</text>
<view class='box'>
<text class='box-word'>naniu</text>
</view>
</view>
分割线,下边的是CSS代码

.image{

width: 200rpx;

height: 200rpx;

margin-top: 160rpx;

}

.main{

display: flex;

flex-direction: column;

align-items: center;

}

.word{

font-size: 24px;

font-weight: bold;

margin-top: 160rpx;

}

.box{

width: 600rpx;

height: 100rpx;

border: 1px solid blue;

border-radius: 5px;

text-align: center;

margin-top: 160px;

}

.box-word{

line-height: 100rpx;

}

page{

background-color: orange;

height:100%;

}

麻烦帮我测试一下,按照老师之前讲的内容写的,图片看不见问题不大,主要是最下边的盒子在我设置宽度600rpx以后就很明显的不居中显示了

写回答

1回答

7七月

2019-04-09

不知道你到底要什么居中?如果要文字居中,那应该设置box 为flex啊。

0
3
JIANGYUHANG
谢谢,检查了一下,搞定了
2019-04-09
共3条回复

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23867 学习 · 6899 问题

查看课程