实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4种常用的对齐方式</title>
<style>
/* 行内元素居中样式 */
.pos1{
width: 150px;
height: 150px;
border: solid;
text-align: center;
}
.pos1 span{
line-height: 150px;
padding: 5px;
}
/* 多行内文本居中 */
.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 行内无素居中 -->
<div class="pos1">
<span>我是行内元素居中</span>
</div>
<!-- 2 多行内文本居中 -->
<div class="pos2">
<span>上联：剑锋出磨砺；</span><br><span>下联：梅馥发苦寒。</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业：
