收藏
批改状态：合格
老师批语：
效果图：
知识点：
1，单个行内元素 水平居中：text-align:center; 垂直：line-hight:"父元素高度"
2，多个行内元素 水平居中：text-align:center; 垂直：display:table-cell; vertical-align:middle;
3，块元素 水平居中：margin:aoto; 垂直：dispaly:table-cell; vertical-align:middle;
4,不定宽元素（无效列表） 水平居中：text-align:center 垂直：display:table-cell; vertical-align:middle/bottom
代码：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>子元素的四种对齐方式</title>
<style type="text/css" media="screen">
#box1{
width: 200px;
height: 150px;
background-color: lightblue;
text-align: center;
}
#box1 span{
line-height: 150px;
}
#box2{
width: 200px;
height: 150px;
background-color: lightcyan;
text-align: center;
/*类型转换为表格单元格*/
display: table-cell;
/*垂直居中*/
vertical-align: middle;
}
#box3{
width: 200px;
height: 150px;
background-color: lightskyblue;
display: table-cell;
vertical-align: middle;
}
.box31{
width: 150px;
height: 100px;
background-color: brown;
margin: auto;
}
#box4{
width: 200px;
height: 150px;
background-color: lightcoral;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
#box4 li{
list-style-type:none;
display: inline;
}
#box4 ul{
padding-left:0;
}
</style>
</head>
<body>
<div id="box1">
<span>我是单个行内元素</span>
</div>
<div id="box2">
<a href="" title="">我是第一个行内元素</a>
<p>我是第二个行内元素</p>
</div>
<div>
</div>
<div id="box3">
<div class="box31">
</div>
</div>
<div>
</div>
<div id="box4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手稿：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
