收藏
批改状态：合格
老师批语：
3.23主要学习了四种元素对齐方法，分别是1.子元素是行内元素的对齐方法；2.子元素是多行行内元素的对齐方法；3.子元素是块元素的对齐方法；4.子元素是不定宽的块元素的对齐方法。四种方法涵盖了网页设计所需的基本对齐方式，对将来网页设计时有着重要的理论作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种对齐方式</title>
<style type="text/css">
.hang {
background-color: lightblue;
width: 200px;
height: 200px;
text-align: center;
}
.dhang {
color: red;
line-height: 200px;
box-shadow: 3px 3px 3px #666;
}
.duo {
background-color: yellow;
width: 200px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.kuai {
background-color: blue;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.kuai .kkuai {
background-color: red;
width: 100px;
height: 100px;
margin: auto;
text-align: center;
}
.buding {
width: 200px;
height: 200px;
text-align: center;
background-color: red;
display: table-cell;
vertical-align: bottom;
}
.buding ul {
margin: 0;
padding: 0;
}
.buding li {
list-style: none;
display: inline;
}
</style>
</head>
<body>
<!-- 子元素是行内元素的对齐方式 -->
<div class="hang">
<a href="" class="dhang">我是单行内元素</a>
</div>
<!-- 子元素是多行的行内元素 -->
<div class="duo">
<a href="" class="dduo">我是多行第一行</a><br>
<span class="dduo">我是多行第二行</span>
</div>
<!-- 子元素是块元素 -->
<br>
<div class="kuai">
<div class="kkuai">
</div>
</div>
<!-- 子元素是不定宽的块元素 -->
<div class="buding">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写版：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
