收藏
批改状态：合格
老师批语：
周五网络故障未能看直播，第二天去单位看的回放！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月23日作业</title>
<style type="text/css">
.box-1{
width: 200px;
height: 200px;
background-color: lightskyblue;
text-align: center;
}
.box-1 a{
line-height: 200px;
text-decoration: none;
}
.box-2{
width: 200px;
height: 200px;
background-color: lightskyblue;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box-3{
width: 200px;
height: 200px;
background-color: lightskyblue;
display: table-cell;
vertical-align: middle;
}
.box-3 .box-3-1{
width: 100px;
height: 100px;
margin: auto;
background-color: brown;
}
.box-4{
width: 200px;
height: 200px;
background-color: lightskyblue;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.box-4 ul{
padding: 0px;
margin: 0px;
}
.box-4 li{
list-style: none;
display: inline;
/*line-height: 200px;*/
}
</style>
</head>
<body>
<h4>用CSS设置四种类型元素的对齐（父元素是块元素）</h4>
1.子元素是行内元素:<br>
a.水平居中:在父元素上设置 text-align:center;<br>
b.垂直居中:在行内子元素上设置行高与父元素相同 line-height <br>
<div class="box-1">
<a href="">宁静致远</a>
</div>
<hr>
2. 子元素是多行内联文本 <br>
a.水平居中:父元素设置 text-align:center <br>
b.垂直居中:父元素设置 display:table-cell;vertical-align:middle <br>
<div class="box-2">
<span>宁静致远</span><br>
<span>淡泊明志</span>
</div>
<hr>
3. 子元素是块元素:<br>
a.水平居中:子元素设置左右自动 margin: auto;<br>
b.垂直居中:父元素设置 display:table-cell;vertical-align:middle <br>
<div class="box-3">
<div class="box-3-1"></div>
</div>
<hr>
4. 子元素是不定宽的块元素 <br>
a.水平居中:子元素转行内元素,父元素设置 text-align:center <br>
b.垂直居中:设置子元素行高与父元素登高 line-height=parent <br>
c.底边居中:与多行内联文本垂直处理方式一致 vertical-align:bottom <br>
<div class="box-4">
<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>点击 "运行实例" 按钮查看在线实例
手抄代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
