实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
hr{
margin:0.5em 0;
}
body{
margin-bottom: 20px;
}
h1,h2{
text-indent: 2em;
line-height: 2em;
}
div{
width: 500px;
height: 100px;
border: 1px solid #000;
box-shadow: 2px 3px 3px 5px #ccc;
}
div:list-child{
margin-bottom: 20px;
}
.box1{
/*设置横向居中*/
text-align: center;
/*设置竖向居中*/
line-height: 100px;
}
.box2{
text-align: center;
/*单元格方式显示*/
display: table-cell;
/*垂直居中*/
vertical-align: middle;
}
.box3{
/*单元格方式显示*/
display: table-cell;
/*垂直居中*/
vertical-align: middle;
}
p{
margin: auto;
display: block;
width: 20px;height: 20px;background-color: #f03333;
}
.box4{
list-style:none;
text-align: center;
/*单元格方式显示*/
display: table-cell;
/*垂直居中*/
vertical-align: bottom;
}
li{
display: inline;
}
</style>
</head>
<body>
<h1>块元素下的子元素</h1>
<hr>
<h2>子元素为行内元素</h2>
<div class="box1">
<a>我就是行内元素</a>
</div>
<hr>
<h2>子元素为内联元素</h2>
<div class="box2">
<span>我就是内联元素</span>
</div>
<hr>
<h2>子元素为块元素</h2>
<div class="box3">
<p></p>
</div>
<hr>
<h2>不知内容的块元素</h2>
<div class="box4">
<ul>
<li>不</li>
<li>确</li>
<li>定</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
