text-align的妙用

今天做微信小程序界面的时候需要做这样一个东西,如下图, 这是一个按钮,按钮上面有一个图片和底部的title

wxml:


<view class="bottom">
<image src="../../images/QRcode.png"></image>
<view class="bottom-item-title">我不相信</view>
</view>

wxss:
/底部/
.bottom{
width: 100%;
height: 200rpx;
background-color: yellow;
text-align: center; // 这里如果不设置的话,图片和文字都会直接到最左边,需要我们自己去, 本来这里设置这个, 只是想让文字居中,但是它图片同样居中了.
}
.bottom image{
width: 30rpx;
height: 30rpx;
margin-top: 20rpx;
}
.bottom-item-title{
margin-top: 20rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
color: #888888;
}
如下图:

text-align的定义是: text-align 属性规定元素中的文本的水平对齐方式。

结论: 如果我们给bottom-item-title设置text-align的时候文字居中,但是图片不居中,需要我们去自己给它调整; 但是如果我们给父元素设置text-align属性的话, 图片和文字同时居中了.
根据text-align的定义,是对元素中的文本生效,且我对其他组件进行了测试,发现都是居中的, 那这边我认为可能是给父元素设置text-align属性之后,父元素把子元素都当成了文本,且能实现子元素对齐的效果.