CSS 水平对齐(Horizontal Align)
块元素对齐
块元素是一个元素,占用了全宽,前后都是换行符。
块元素的例子:
<h1>
<p>
<div>
在这一章中,我们会告诉你块元素如何水平对齐布局。
中心对齐,使用margin属性
块元素可以把左,右页边距设置为"自动"对齐。
Note: 在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPE
margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:
实例
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
提示: 如果宽度是100%,对齐是没有效果的。
注意:IE5中块元素有一个margin处理BUG。为了使上述例子能工作,在IE5中,需要添加一些额外的代码。
Crossbrowser 兼容性问题
<p类似这样的元素对齐时,预先确定margin和元素的填充,始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。
IE8和早期有一个问题,当使用position属性时。如果一个容器元素(在本例中<div class="container">)指定的宽度,!DOCTYPE声明是缺失,IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用position属性时始终设置在DOCTYPE声明中!
使用float属性设置左,右对齐
使用float属性是对齐元素的方法之一:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .right { float:right; width:300px; background-color:#b0e0e6; } </style> </head> <body> <div class="right"> <p>凡是到达了的地方,都属于昨天。哪怕那山再青,那水再秀,那风再温柔。带深的流连便成了一种羁绊,绊住的不仅是双脚,还有未来。</p> <p>怎麽能不喜欢出发呢?没见过大山的巍峨,真是遗憾;见了大山的巍峨没见过大海的浩翰,仍然是遗憾; 见了大海的浩翰没见过大漠的广袤,依旧遗憾;见了大漠的广袤没见过森林的神秘,还是遗憾。世界上有不绝的风景,我有不老的心情。</p> </div> </body> </html>
Crossbrowser兼容性问题
类似这样的元素对齐时,预先确定margin和元素的填充,始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。
IE8和早期有一个问题,当使用float属性时。如果一个容器元素(在本例中<div class="container">)指定的宽度,!DOCTYPE声明是缺失,IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用float属性时始终设置在DOCTYPE声明中!
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; } </style> </head> <body> <div class="right"> <p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p> </div> </body> </html>