水平居中与垂直居中,以及对齐

我以前一直都搞不清楚水平居中与垂直居中,更不用谈什么对齐,临时抱佛脚,也找不到很好的答案,于是把网上的代码研究了一番,总结一下经验:

盒子水平居中:margin:0 auto

    注意:在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPE

        如果宽度是100%,对齐是没有效果的,要给居中的元素一个宽度,否则无效。

        加入margin:0 auto就不能加入float浮动样式,避免逻辑错误,造成布局居中不兼容。

行内元素水平居中:父元素设置text-align:center

 

单行文本垂直居中:line-height=height

通用垂直居中:父盒子:display:table子盒子:display:table-cell vertical-aglign:middle    低版本ie:子盒子:display:inline-block(这个个人感觉最好用!!

块级元素垂直居中:定位+margin

块级元素垂直居中:利用padding-top与padding-bottom相等来实现

 

文字与图片对齐:

        ①移动端:弹性布局兼容性较好:display:flex;

                       box-align: center;

                       align-items: center;

        ②PC端:弹性布局兼容性差,因此:用display:table就可以了

        ③文字与图片在同一个div中,给这个div设置vertical-align:middle

        ④将图片设置为背景图,然后给文字盒子一个padding-left

        ⑤图片在父盒子中,文字在子盒子中,然后用margin控制对齐

   ⑥定位也可以用来居中,但是比较繁杂

 

posted @ 2017-06-11 10:47  janu  阅读(2828)  评论(0编辑  收藏  举报