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