水平對齊方式

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

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

inline-block
text-align

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

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



  
    
    
    
  

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

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

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

缺點(diǎn):

1) 因為text-align是繼承樣式，會導(dǎo)致下級所有元素文字生效

云服務(wù)器 GPU云服務(wù)器水平對齊水平水平多級水平滑動

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

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

相關(guān)文章

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

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(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 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(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 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(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 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(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 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(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 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(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 評論0 收藏0