实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
width: 200px;
height: 200px;
text-align: center; /*居中*/
background-color: #33CC66;
}
.t1 a{
line-height: 200px;
/*与父元素相同垂直居中*/
}
.t2{
width: 200px;
height: 200px;
text-align: center;
background-color: #33CCCC;
/*设置显示方式为表单单元格*/
display:table-cell;
vertical-align: middle;
/*设置单元格内的元素垂直居中*/
}
.t3{
width: 200px;
height: 200px;
background-color: #330033;
/*设置显示方式为表单单元格*/
display: table-cell;
vertical-align: middle;
/*设置单元格内的元素垂直居中*/
}
.t3-1{
width: 100px;
height: 100px;
/*设置左右对齐居中*/
margin: 0 auto;
background-color:#990033;
}
.t4 li{
list-style: none;
display: inline;
}
.t4{
width: 200px;
height: 200px;
background-color: #CC9999;
text-align: center;
/*设置显示方式为表单单元格*/
display: table-cell;
vertical-align: bottom;
/*下方对齐*/
}
.t4 ul{
/*取消多余的边距*/
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="t1">
<a>红红火火恍恍惚惚</a>
</div>
<hr>
<div class="t2">
<a>红红火火恍恍惚惚</a><br>
<a>红红火火恍恍惚惚</a>
</div>
<hr>
<div class="t3">
<div class="t3-1">
</div>
</div>
<hr>
<div class="t4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
