CSS 水平对齐(Horizo...LOGIN

CSS 水平对齐(Horizontal Align)

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>


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>突然开始怀念花开。粉色的樱,蓝色的龙胆,堇色的熏衣草,由近而远,延伸向远方天空的尽头。</p> <p>爱你现在的时光。过去的已经过去了,较什么劲呢?未来的还没有来,焦虑什么呢?你知道什么是真正的恐惧吗?</p> </div> <p><b>Note: </b>短篇小说</p> </body> </html>
提交重置代码
章节课件