輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
分享、交流、傳播知識分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
在各類開發(fā)中都需要用到圖標(biāo)和文字結(jié)合顯示，如下圖：
對于CSS不是很熟悉的開發(fā)者來說，經(jīng)常會遇到圖標(biāo)與文字不對齊的情況，如下圖:
這對于比較注重細(xì)節(jié)的前端開發(fā)者來說，是決定不允許出現(xiàn)的，所以看到這種情況，大部分開發(fā)者都會去把他調(diào)整底部水平對齊。
處理這個問題，很多新手會用指定高度來解決，如：
height: 30px;
line-height: 30px;
或者使用:
padding: 10px 0;
以上的方法雖然去慢慢調(diào)整也能做到想要的效果，但我告訴你們，這樣做法太浪費(fèi)時間精力了，教你一招，采用定位的方式，永久輕松解決這個問題。
先看不采用定位的代碼是如何的？
wxml代碼：
<view class='text-style'> <view><i class="iconfont icon-zhaoxiangji gnicon02"></i> 換裝</view> </view>
接下來是wxss代碼：
.text-style {
width: 25%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
color:#7A7E83;
float: left;
align-items:center
}
.gnicon01{
color:#66A2F8;
}wxss只是關(guān)鍵代碼，關(guān)于圖標(biāo)的樣式icnfont 和icon-zhaoxiangji這些是平臺提供的圖標(biāo)代碼樣式，每個平臺采用樣式不同，不過大致是一樣的。
按以上代碼實(shí)現(xiàn)的效果是這樣的：
圖標(biāo)和文字底部不對齊，接下來加個定位代碼，解決這個問題，以后再也不用為這個問題而傷腦了。
我們先在text-style樣式上添加定位代碼：
position: relative;
再在圖標(biāo)樣式上gnicon01樣式上添加如下代碼：
position: absolute; top:9rpx; left:26rpx; font-size: 34rpx;
position:relative層指定這個樣式后，當(dāng)子層有position:absolute時，子層就會以父層為基準(zhǔn)，對齊top,left,bottom,right等屬性。
通過以上方法，以后寫圖標(biāo)或圖片等與文字混排時就可以任意對齊了。
現(xiàn)把text-style和gnicon01的代碼完整發(fā)出來
wxml代碼：
<view class='text-style'> <text class="active"></text> <view class="active1"><i class="iconfont icon-zhaoxiangji gnicon01"></i> 背景</view> </view>
wxss代碼：
.text-style {
width: 25%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
color:#7A7E83;
float: left;
align-items:center;
position: relative;
}
.active1 {
color: #66A2F8;
}
.active {
display: block;
width: 100%;
height: 6rpx;
background: #66A2F8;
position: relative;
left: 0rpx;
top: 0rpx;
}
.gnicon01{
color:#66A2F8;
position: absolute;
top:9rpx;
left:26rpx;
font-size: 34rpx;
}
.gnicon02{
color:#7A7E83;
position: absolute;
top:9rpx;
left:26rpx;
font-size: 34rpx;
}代碼的最終效果圖：
總結(jié)：微信小程序和網(wǎng)頁開發(fā)的樣式都是采用CSS實(shí)現(xiàn)的，所以方法是通用的，當(dāng)需要把圖標(biāo)和圖片與文字對齊的時候，就在父層加上position:relative;屬性，然后在圖標(biāo)或圖片層通過position:absolute屬性實(shí)現(xiàn)left,right,top,bottom等來控制對齊。
