水平对齐方式

付永刚发布于2019-08-30 15:44 / 3474人阅读

摘要：原理子元素设置成行内块状元素，父元素设置文本居中对齐也能使其生效子元素固定高宽子元素不定高宽优点不需要设置子元素具体宽度兼容性好，甚至可以兼容缺點因为是继承样式，会导致下级所有元素文字生效

inline-block
text-align

原理：子元素设置成行内块状元素，父元素设置文本居中对齐也能使其生效

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



  
    
    
    
  

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

优点:

1) 不需要设置子元素具体宽度;
2) 兼容性好，甚至可以兼容ie6、ie7;

缺點:

1) 因为text-align是继承样式，会导致下级所有元素文字生效

云服务器服务器托管水平对齐水平水平多级水平滑动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116192.html

再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

felix0913 2019-08-23 15:29 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

huangjinnan 2019-08-23 15:28 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

CarlBenjamin 2019-08-30 15:55 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

kel 2019-08-30 15:55 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

Shimmer 2019-08-02 14:20 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

摘要：可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置，不然默认按照比例排满一行。默认值为，表示当空间不足时，自动缩小，其可能的值为整数，表示不同的缩小比例。思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

mayaohua 2019-08-02 14:20 评论0 收藏0