水平居中与垂直居中,以及对齐
我以前一直都搞不清楚水平居中与垂直居中,更不用谈什么对齐,临时抱佛脚,也找不到很好的答案,于是把网上的代码研究了一番,总结一下经验:
盒子水平居中: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控制对齐
⑥定位也可以用来居中,但是比较繁杂