圖片和文字垂直居中-flex佈局
阿新 • • 發佈:2019-02-17
因為float和position用的比較熟,所以flex只是瞭解了一下,基本不用。但是今天發現了flex在處理圖片和文字對齊方便真是超爽der~
1.需求
就是一個盒子裡面,圖片和文字垂直居中
2.慣用套路
我之前的解決思路都是給圖片設margin,給文字設line-height,
為了適配單位一般都不是px,用百分比設定,基本都是靠除錯效果調出來的,非常不機智
好吧簡直智障
3.新世界大門
//html
<view class="father">
<image class="heart left" src ="../../../image/like.png"></image>
<view class="text right">贊</view>
</view>
//css
.father{
//設好寬高
width:140rpx;
height:70rpx;
display: flex;
//水平方向元素居中,兩邊留白
justify-content:center;
//垂直方向元素居中,兩邊留白
align-items: center;
}
//子元素就設好寬高就可以了...