<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS控制元素对齐技巧</title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background:#ffff0a;
text-align:center;/*水平居中*/
}
.box1 a{
line-height:200px;/*垂直居中，设置行内元素a标签行高=父元素行高*/
}
.box2{
width:200px;
height:200px;
background:lightskyblue;
text-align:center;
display:table-cell;/*垂直居中，多行元素*/
vertical-align:middle;
}
.box3{
width:200px;
height:200px;
background-color:#6cf;
text-align:center;
display:table-cell;/*垂直居中,把元素视为表格元素*/
vertical-align:middle;
}
.box3 .child{
width:100px;
height:100px;
background-color:#f4ff0a;
margin:auto;
}
.box4{
width:200px;
height:200px;
background-color:#6cf;
text-align:center;
display:table-cell;
vertical-align:bottom;
}
.box4 ul{
padding-left:0;
/*line-height:200px;*/
}
.box4 li{
list-style:none;
display:inline;
}
</style>
</head>
<body>
<div>
<a href="">PHP中文网</a>
</div>
<hr>
<div>
<a href="">PHP中文网</a>
<span>www.php.cn</span>
</div>
<hr>
<div>
<div></div>
</div>
<hr>
<div>
<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>
