实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0323作业，四种对齐方式</title>
</head>
<style type="text/css">
.main{width:300px;margin:0 auto;}/*画了一个大盒子装案例*/
.box1,.box2,.box3,.box4{ /*画了4个300*300的小盒子*/
width:300px;
height:300px;
}
.box1{ /*把盒子1的背景设成黄的，内部文字水平居中，把文字行高设得和盒子一样高，单行文字实现水平方向和垂直方向居中*/
background: yellow;
text-align: center;
line-height: 300px;
}
.box2{ /*把盒子2的背景设成天蓝的，内部文字水平居中，把盒子显示方式设置为单元格，使用单元格垂直居中方式，最终实现水平方向和垂直方向居中*/
background: skyblue;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box2 p:last-child{ /*第二个段落缩进2个汉字字符，加点内边距看上去漂亮点*/
text-align: left;
text-indent: 2em;
padding: 0 20px;
}
.box3{ /*盒子3加上背景色，为了让内部块元素垂直居中，让它以单元格垂直居中方式，实现居中*/
background: pink;
display: table-cell;
vertical-align: middle;
}
.box3 .colorbox{ /*内部文字水平居中，把文字行高设得和盒子一样高，单行文字实现水平方向和垂直方向居中*/
width:150px;
height:150px;
background:grey;
text-align: center;
line-height: 150px;
margin: 0 auto;
}
.box4{/*为了让内部块元素垂直居中，让它以单元格垂直居中方式，实现居中*/
background: pink;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.box4 ul{/*清除默认列表样式*/
list-style: none;
padding:0;
}
.box4 ul li{ /*将列表转换为行内元素，让其水平成为一行*/
display: inline;
}
</style>
<body>
<div class="main">
<div class="box1">
<a href="">单行文本居中</a>
</div>
<hr>
<div class="box2">
<p>段落居中</p>
<p>
23日，周立波案开庭。走出法庭时，被问及美国警察是否违法拦停盘查时，周立波妻子胡洁回应“你说对了”。对于记者的发问，周立波一直打岔。被问及是否对无罪有信心，他回应梨视频拍客：“你会抢劫银行吗？你会强奸吗？你会嫖娼吗？”还说“我已经被你们弄得没工作了”、“午饭只有看能力吃，喜欢吃豆腐”。
</p>
</div>
<hr>
<div class="box3">
<div class="colorbox">居中色块</div>
</div>
<hr>
<div class="box4">
<p>页码导航底部居中</p>
<ul>
<li class="page1"><a href="">1</a></li>
<li class="page2"><a href="">2</a></li>
<li class="page3"><a href="">3</a></li>
<li class="page4"><a href="">4</a></li>
<li class="page5"><a href="">5</a></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
