三级全黄做爰电影_夫妻之间那些事_啊啊啊啊好爽视频_国产精品xxxx喷水欧美_色一情一乱一伦麻豆_国产精品美乳一区二区免费_亚洲综合av在线在线播放_人与禽伦性了_黄色软件色多多_av在线免费观看网址

在各類開發(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等來控制對齊。