麻烦帮我测试一下我这代码哪里错误了,导致盒子不能居中
来源: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回答
-
不知道你到底要什么居中?如果要文字居中,那应该设置box 为flex啊。
032019-04-09
相似问题