收藏
批改状态：合格
老师批语：记得及时修改作业哦！要求群文件中有哦！
![6`}X00T}GS4J{F{N]}}]9_G.png](https://img.php.cn//upload/image/418/337/147/1522139222628320.png "1522139222628320.png")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>几种对齐效果</title>
<style type="text/css">
.one{
width: 300px;
height:30px;
text-align: center;
line-height: 30px;
background-color: #276;
}
.two{
width: 300px;
height:80px;
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: #963;
}
.three{
width: 300px;
height: 50px;
background-color: #916;
display: table-cell;
vertical-align: middle;
}
.three1{
width: 100px;
height: 30px;
background-color: #529;
margin: auto;
text-align: center;
line-height: 30px;
}
.four{
width: 300px;
height: 30px;
background-color: #582;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
display: inline;
}
</style>
</head>
<body>
<!-- 单行文字居中 -->
<div class="one">资料中心
</div>
<br>
<!-- 多行文字居中 -->
<div class="two"><p>关于内部资料管理 <br>
内部资料禁止外传，一经发现严肃处理！</p>
</div>
<br>
<!-- 块居中 -->
<div class="three">
<div class="three1">禁止下载
</div>
</div>
<br>
<!-- 不定宽居中 -->
<div class="four">
<ul >
<li><a href="">首页</a></li>
<li><a href="">上一页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">...</a></li>
<li><a href="">下一页</a></li>
<li><a href="">尾页</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
