收藏
批改狀態(tài)：合格
老師批語：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4種常用的對齊方式</title>
<style>
/* 行內(nèi)元素居中樣式 */
.pos1{
width: 150px;
height: 150px;
border: solid;
text-align: center;
}
.pos1 span{
line-height: 150px;
padding: 5px;
}
/* 多行內(nèi)文本居中 */
.pos2{
width: 200px;
height: 200px;
background-color: coral;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/* 塊元素居中 */
.pos3{
width: 300px;
height: 300px;
background-color:forestgreen;
margin-top: 5px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/* 3 塊元素居中 */
.pos3 p{
width: 200px;
height: 200px;
background-color: green;
margin: auto;
line-height: 200px;
}
/* 不定寬的塊元素 */
.pos4{
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.pos4 ul{
margin: 0;
padding: 10px;
list-style: none;
}
.pos4 ul li{
width: 30px;
height: 20px;
border: 1px solid;
display: inline;
padding: 5px;
}
.pos4 a{
text-decoration: none;
}
.pos4 li:hover{
background-color: red;
}
</style>
</head>
<body>
<!-- 1 行內(nèi)無素居中 -->
<div class="pos1">
<span>我是行內(nèi)元素居中</span>
</div>
<!-- 2 多行內(nèi)文本居中 -->
<div class="pos2">
<span>上聯(lián)：劍鋒出磨礪；</span><br><span>下聯(lián)：梅馥發(fā)苦寒。</span>
</div>
<hr>
<!-- 3 塊元素居中 -->
<div class="pos3">
<p>子元素是塊級元素</p>
</div>
<hr>
<!-- 子元素是不定寬的塊元素 -->
<div class="pos4">
<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>點擊 "運行實例" 按鈕查看在線實例
手抄作業(yè)：
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
