收藏
<!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>子元素為內聯(lián)元素</h2>
<div class="box2">
<span>我就是內聯(lián)元素</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>點擊 "運行實例" 按鈕查看在線實例
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
