以前从网上看到的网页中元素居中方法不过是margin:0 auto和text-align:center而已。可是应用的时候却不一定会居中。今天读了《编写高质量代码——Web前端开发修炼之道》上的讲解才恍然大悟。下面分享给大家:
1. 水平居中
(1)对父元素设置样式为text-align:center,则内部元素居中。
应用场景:要求内部元素为文本、图片等行内元素
(2)对待居中元素本身设置样式为margin-left:auto;margin-right:auto(有时简写为margin:0 auto)
应用场景:要求该元素是确定宽度的块级元素
(3)将待居中元素包含在table标签中,然后对table设置样式为margin-left:auto和margin-right:auto
应用场景:要求该元素是不确定宽度的块级元素
缺点:增加了无语义标签,加深了标签的嵌套层数。
(4)将待居中元素修改为display:inline,然后对其设置样式为text-align:center
应用场景:要求该元素是不确定宽度的块级元素
优点:不用增加无语义标签,简化标签的嵌套深度
缺点:块级元素改为inline之后缺少了一些功能,如设置长宽等
(5)对父元素设置样式为float:left、position:relative和left:50%,然后对子元素设置样式为float:left、position:relative和left:-50%
应用场景:要求该元素是不确定宽度的块级元素
优点:不用把块级元素改为行内元素,也不增加无语义标签,不增加嵌套深度
缺点:设置position:relative会带来副作用
2. 竖直居中
(1)对父元素设置样式为相同的上下边距,即padding-top和padding-bottom相同
应用场景:针对父元素高度不确定的文本、图片、块级元素
(2)对父元素设置样式line-height的值与父元素的height的值相同
应用场景:针对父元素高度确定的单行文本
(3)将待居中元素嵌入表格table的td或th中(td标签默认设置vertical-align为middle,所以不需要再设置)
应用场景:针对父元素高度确定的多行文本、图片、块级元素
优点:无副作用
缺点:添加无语义标签,增加嵌套深度
(4)对IE8和Firefox设置父元素样式为display:table-cell和vertical-align:middle。对于不支持table-cell的IE6/7采用hack
hack:对祖父元素设置样式为:*position:relative,对父元素设置样式为:*position:absolute;*top:50%,对待居中元素设置样式为:*position:relative;*top:-50%
应用场景:针对父元素高度确定的多行文本、图片、块级元素
优点:没有增加额外标签
缺点;使用hack,不利于维护。position的设置可能带来副作用。