圖標文字對齊的幾種常見方法

caige 發布于2019-08-30 15:54 / 2397人閱讀

摘要：總結關于使用哪一種方法都是可以選擇的，但是第一種方法希望大家可以認真去思考下能收獲很多關于內聯元素對齊的知識。

引言

圖標文字對齊在平時的工作中是最常見的了，最早學習時候一般都是用vertical-align，但是由于inline-block元素在和文字對齊時候的一些很麻煩的表現（見上一篇文章），大家應該都經歷過那種行框高度高出幾px的情形。簡單暴力的話還可以用absolute定位方法。flex布局出現以后很多時候用flex的居中對齊也是很方便的。

實現

下面就以實現下面這個按鈕的樣式總結下幾種方法：

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.btn:hover, .btn:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

inline-block對齊法

思路很簡單，要讓圖標和文字對齊，就讓i元素高度和和文字行高一致并且是對齊，然后圖標背景居中就可以了，問題在于inline-block元素內沒有內聯元素則其基線是margin底邊緣，這樣和文字對齊時候就會有上下交錯導致行框的高度都增高了，既然這樣我們只要讓i元素基線和文字基線一致就能保證和文字對齊了，方案就是在其中包含文字同時文字又不顯示出來：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px; //等于行高
  text-indent: -9999em; //隱藏文字
  white-space: nowrap;
}
.icon::before {
  content: "icon";
}
.icon-info {
  background: url(./info-circle.png) no-repeat center;
}

用元素插入文字，用一個很大的text-indent來隱藏文字就可以達到想要的效果了。

絕對定位法

說到絕對定位的方法大家肯定都會了，給button元素設置relative，然后圖標絕對定位：

.btn {
  ...
  position: relative;
  padding-left: 32px;
}

.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 12px;
}

如果上層元素沒有影響absolute的定位，其實可以省去button的相對定位，直接使用無依賴絕對定位即可，用margin-left調整位置：

.btn {
  ...
  padding-left: 32px;
}
.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -20px;
}

flex布局法

這個直接給button設置display:inline-flex;align-items: center;即可。

總結

關于使用哪一種方法都是可以選擇的，但是第一種方法希望大家可以認真去思考下能收獲很多關于內聯元素對齊的知識。

云服務器 GPU云服務器 js緩存的幾種方法最基本的幾種 html的幾種輪播 js的幾種數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117086.html

Vertical-Align: 你應該知道的事情

摘要：引言說起大家都知道他是用在對相鄰的文字和內聯元素上，比如常見的將一個圖標和相鄰的文字居中對齊。每個內聯元素也有其自己的基線，頂線和底線。內聯元素的基線位置低于行框的基線。內聯元素的基線相對于行框基線移動相應于行高百分比的數值。平時遇到vertical-align時候會有各種抓狂的時刻，調來調去雖然也弄好了但是心里面一直很虛，因為一直沒有透徹理解過這個屬性，搜索時候發現了一篇很棒的文章...

yacheng 2019-08-30 15:54 評論0 收藏0
前端培訓-初級階段（9 -12）

摘要：前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS...

LancerComet 2019-08-30 15:56 評論0 收藏0
前端培訓-初級階段（9 -12）

摘要：前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS...

netScorpion 2019-08-02 14:33 評論0 收藏0
前端培訓-初級階段（9 -12）

摘要：前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS...

MorePainMoreGain 2019-08-26 18:18 評論0 收藏0