好得很程序员自学网

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

css水平居中和垂直居中_html/css_WEB-ITnose

水平居中:
内联元素:text-align:center;相对于父级居中显示
块级元素:margin:0 auto;但是需要同时width,否则无法看到效果
多个块级元素居中:在此想要探讨一下display:inline-block;和display:flex;
方法1:在父级上设置text-align:center;在元素上设置:display:inline-block;同时为了使文字向左显示,设置了text-align:left;在浏览器中的显示为,子元素高度自适应,底部对齐。
方法2:在子元素上设置display:center;justify-content:center;子元素的高度一致,与元素中内容最多的高度相同。
二种方法在谷歌,火狐,360均兼容,但是第2种方法在IE10中不兼容,之前的IE版本可想也是不兼容的。当然在此也要处理由于浮动导致离层,父级背景颜色加不上去的问题。

 1   2   

3 I'm an element that is block-like with my siblings and we're centered in a row. 4

查看更多关于css水平居中和垂直居中_html/css_WEB-ITnose的详细内容...

  阅读:34次