1. 使用margin属性来水平对齐
1.1. 可通过将左和右外边距设置为"auto", 来对齐块元素。把左和右外边距设置为auto, 规定的是均等地分配可用的外边距, 结果就是居中的元素。
1.2. 使用margin: auto, 一定要声明!DOCTYPE, 否则在某些浏览器版本中无效。
1.3. 如果宽度是100%, 则对齐没有效果。
1.4. 例子
1.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用margin属性来水平对齐</title>
<style type="text/css">
.center {
margin: 0 auto;
width: 70%;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</div>
</body>
</html>
1.4.2. 效果图