在一列布局中,我们经常需要去居中水平显示,这时候就需要用到text-align。
下面是一个简单的页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一列布局居中显示</title>
<style type="text/css">
body{margin: 0;padding: 0;font-size: 30px}
div{text-align: center;font-weight: bold}
.main,.footer{width: 960px;}
.head{width: 100%;height: 100px;background: #ccc}
.main{height: 600px;background: #FCC;margin: 0 auto}
.footer{height: 50px;background: #9cf;margin: 0 auto}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>