CSS：⽂字⽔平居中的写法<view class='kk'>
⽔平垂直居中⽂字
</view>
.kk{
border: 1px solid #000000;
width: 200px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
}
其中line-height需要注意下。
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" >
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" >
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
css设置文字垂直居中
<view class="flex-item bc_blue">3</view>
</view>
</view>
.flex-wrp {
display: flex;
}
.flex-item.bc_green {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
}
.flex-item.bc_red {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
}
.flex-item.bc_blue {
width: 100px;
height: 100px;
background-color: blue;
text-align: center;
line-height: 100px;
}
下⾯这种写法也是可以的：.flex-wrp {
display: flex;
}
.
flex-item{
display: flex;
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
}
.bc_green {
background-color: green;
}
.flex-wrp .flex-item.bc_red {
background-color: red;
}
.flex-wrp .flex-item.bc_blue {
background-color: blue;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。