在css中,要实现水平对齐你会使用什么属性?text-align?嗯,这个属性只能实现文本对齐不适用于块元素之间的水平对齐。那么,对于块元素之间的水平对齐方式,你又了解多少?下面小编给大家介绍一下:实现块元素水平对齐的几种属性,希望对大家有所帮助。
一、什么是块元素
首先给大家复习一下什么是块元素。
块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。
块元素的例子:h1、p 、div。
二、中心对齐使用margin属性
第一种使块元素水平对齐的属性就是margin。我们可以通过把左和右外边距设置为“auto”,其效果就是居中元素。
实例:
注意:1.如果宽度是100%,则对齐没有效果。
2.如果不声明!DOCTYPE,margin:auto在IE8以及更早的版本中是无效的。
由于IE5对块元素存在一个外边距处理方面的BUG。所以如果你想上面的例子在IE5中能应用,则需要添加一些额外的代码。
具体代码:
三、设置左、右对齐的属性
1.使用position属性
在之前的课程中,我们介绍了绝对定位。可能你不会想到,绝对定位可是对齐元素的方法之一喔。
请看下面的实例,实现的是右对齐的效果;
注意采用position属性进行水平对齐时,同样需要注意跨浏览器兼容性问题。
例如:
像这样对body元素的外边距和内边距进行预定义,避免了在不同的浏览器中出现可见的差异。
这是因为在IE8以及更早的版本,如果容器元素设置了指定的宽度,并且省略了!DOCTYPE声明,那么IE8以及更早的版本会在右侧增加17px的外边距。
2.使用float属性
对元素设置左右对齐的另一种方法是使用float属性。
下面实例同样实现右对齐:
为了避免跨浏览器的兼容性问题,同样,我们采取了对body元素的外边距和内边距进行预定义的方法。
以上就是小编给大家带来的实现块元素水平对齐的三种属性。其实要解决一个问题,我们可以通过多种方式,CSS编写也不例外,所谓条条大路通罗马。关键是找到最适合自己的方法,这样才能让我们在CSS的编写上事半功倍!