成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

圖標(biāo)文字對(duì)齊的幾種常見方法

caige / 2413人閱讀

摘要：總結(jié)關(guān)于使用哪一種方法都是可以選擇的，但是第一種方法希望大家可以認(rèn)真去思考下能收獲很多關(guān)于內(nèi)聯(lián)元素對(duì)齊的知識(shí)。

引言

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

實(shí)現(xiàn)

下面就以實(shí)現(xiàn)下面這個(gè)按鈕的樣式總結(jié)下幾種方法：

.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對(duì)齊法

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

.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;
}

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

絕對(duì)定位法

說到絕對(duì)定位的方法大家肯定都會(huì)了，給button元素設(shè)置relative，然后圖標(biāo)絕對(duì)定位：

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

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

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

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

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

總結(jié)

關(guān)于使用哪一種方法都是可以選擇的，但是第一種方法希望大家可以認(rèn)真去思考下能收獲很多關(guān)于內(nèi)聯(lián)元素對(duì)齊的知識(shí)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117086.html

相關(guān)文章

  • Vertical-Align: 你應(yīng)該知道的事情

    摘要：引言說起大家都知道他是用在對(duì)相鄰的文字和內(nèi)聯(lián)元素上，比如常見的將一個(gè)圖標(biāo)和相鄰的文字居中對(duì)齊。每個(gè)內(nèi)聯(lián)元素也有其自己的基線，頂線和底線。內(nèi)聯(lián)元素的基線位置低于行框的基線。內(nèi)聯(lián)元素的基線相對(duì)于行框基線移動(dòng)相應(yīng)于行高百分比的數(shù)值。 平時(shí)遇到vertical-align時(shí)候會(huì)有各種抓狂的時(shí)刻，調(diào)來調(diào)去雖然也弄好了但是心里面一直很虛，因?yàn)橐恢睕]有透徹理解過這個(gè)屬性，搜索時(shí)候發(fā)現(xiàn)了一篇很棒的文章...

    yacheng 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁面的適配布局教程語法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    LancerComet 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁面的適配布局教程語法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    netScorpion 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁面的適配布局教程語法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    MorePainMoreGain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<