实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐方式</title>
<style type="text/css">
span{margin: 0;padding: 0;}
.div1{
width:100px;
height: 100px;
background-color: aqua;
text-align: center;
}
.div1{line-height: 100px;}
.div2{
width:100px;
height:100px;
background-color:chartreuse;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.div3 {
width: 100px;
height: 100px;
background-color: royalblue;
display:table-cell;
vertical-align: middle;
}
.div3 div {
width: 50px;
height: 50px;
background-color: red;
margin:auto;
}
.div4 {
width: 200px;
height: 200px;
background-color: brown;
text-align: center;
display:table-cell;
vertical-align: bottom;
}
ul{padding: 0;margin: 0;}
.div4 li{list-style: none;
display: inline;
}
</style>
</head>
<body>
<div class="div1"><a href=""> php中文网</a></div>
<div class="div2"><span>php中文网</span><br><span>www.php.cn</span></div><br>
<div class="div3"><div></div></div><hr>
<div class="div4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例