实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四种对齐方式</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#box1{
/*设置盒子宽高*/
width: 250px;height: 250px;
/*设置背景*/
background: yellow;
/*转换盒模型*/
display: table-cell;
/*设置垂直居中和display：table-cell 配合使用*/
vertical-align: middle;
}
span{
/*设置盒子宽高*/
height: 100px;
width: 100px;
/*转换盒子模型为块元素*/
display: block;
/*背景*/
background: yellowgreen;
/*设置水平居中*/
margin: auto;
}
#box2{
/*设置宽高*/
width: 250px;height: 250px;
/*设置背景颜色*/
background-color:lightsalmon ;
/*设置文本居中*/
text-align: center;
/*转换表格盒模型*/
display: table-cell;
/*设置垂直下边框和display：table-cell 配合使用*/
vertical-align: bottom;
}
#box2 ul li{
/*去除列表默认样式*/
list-style: none;
/*转换盒子模型 为行间*/
display: inline;
}
.box3{
/*设置宽高、 背景色、 文本居中、 行高*/
width: 250px;height: 250px;
background-color: lightgreen;
text-align: center;
line-height: 250px;
}
.box3 a{
/*去除下划线*/
text-decoration: none;
}
/*设置a标签的伪类hover*/
.box3 a:hover{
text-decoration: underline;/*加下划线*/
font-size: 1.05em;/*加大*/
font-weight:1.05em ;/*加粗*/
color: brown; /*字体颜色*/
}
.box4{
/*设置宽高、 背景色、 文本居中*/
width: 250px;height: 250px;
background-color: darkgray;
text-align: center;
/*转换盒模型*/
display: table-cell;
/*垂直居中*/
vertical-align: middle;
}
</style>
<body>
<div id="box1">
<span>
</span>
</div>
<hr />
<div id="box2">
<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>
<hr />
<div class="box3">
<a href="">中国达人秀</a>
</div><hr />
<div class="box4">
<p>中国好声音</p>
<a href="">奔跑吧！兄弟</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
