好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS实现水平居中的4种思路_html/css_WEB-ITnose

× 目录 [1]text-align [2]margin [3]absolute [4]flex

前面的话

  水平居中是经常遇到的问题。看似方法较多,条条大路通罗马。但系统梳理下,其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路

思路一:在父元素中设置text-align:center实现行内元素水平居中

  将子元素的display设置为inline-block,使子元素变成行内元素

  [注意]若要兼容IE7-浏览器,可使用display:inline;zoom:1;来达到inline-block的效果

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

DEMO

查看更多关于CSS实现水平居中的4种思路_html/css_WEB-ITnose的详细内容...

  阅读:28次