水平對(duì)齊方式

付永剛發(fā)布于2019-08-30 15:44 / 3609人閱讀

摘要：原理子元素設(shè)置成行內(nèi)塊狀元素，父元素設(shè)置文本居中對(duì)齊也能使其生效子元素固定高寬子元素不定高寬優(yōu)點(diǎn)不需要設(shè)置子元素具體寬度兼容性好，甚至可以兼容缺點(diǎn)因?yàn)槭抢^承樣式，會(huì)導(dǎo)致下級(jí)所有元素文字生效

inline-block
text-align

原理：子元素設(shè)置成行內(nèi)塊狀元素，父元素設(shè)置文本居中對(duì)齊也能使其生效

#parent{text-align: center;}
#child {display: inline-block;}



  
    
    
    
  

  
    子元素固定高寬A
    
      A
    
    子元素不定高寬B
    
      B

優(yōu)點(diǎn):

1) 不需要設(shè)置子元素具體寬度;
2) 兼容性好，甚至可以兼容ie6、ie7;

缺點(diǎn):

1) 因?yàn)閠ext-align是繼承樣式，會(huì)導(dǎo)致下級(jí)所有元素文字生效

GPU云服務(wù)器云服務(wù)器水平對(duì)齊水平水平多級(jí) 水平滑動(dòng)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116192.html

相關(guān)文章

再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

felix0913 2019-08-23 15:29 評(píng)論0 收藏0
再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

huangjinnan 2019-08-23 15:28 評(píng)論0 收藏0
再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

CarlBenjamin 2019-08-30 15:55 評(píng)論0 收藏0
再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

kel 2019-08-30 15:55 評(píng)論0 收藏0
再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

Shimmer 2019-08-02 14:20 評(píng)論0 收藏0
再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對(duì)齊右對(duì)齊居中對(duì)齊兩端對(duì)齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動(dòng)縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

mayaohua 2019-08-02 14:20 評(píng)論0 收藏0