收藏
批改状态：合格
老师批语：
1、代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS控制元素对齐</title>
<style type="text/css">
/*1.第一种对齐方式*/
.box1{
width: 100px;
height: 100px;
background-color: lightgreen;
text-align: center;
}
.box1 a{
line-height: 100px;
text-decoration: none;
}
/*2.第二种对齐方式*/
.box2{
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/*3.第三种对齐方式*/
.box3{
width: 200px;
height: 200px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
.box3 .child{
width: 100px;
height: 100px;
background-color: cyan;
margin: auto;
}
/*4.第四种对齐方式*/
.box4{
width: 200px;
height: 100px;
background-color: lightblue;
text-align: center;
display: table-cell;
/*vertical-align: middle;*/ /*垂直居中*/
vertical-align: bottom;
}
.box4 ul{
padding: 0;
margin: 0;
}
.box4 li{
list-style: none;
display: inline;
}
</style>
</head>
<body>
<h3>父元素是块元素，根据子元素分类</h3>
<h4>1.子元素是行内元素，单行</h4>
a.水平居中：设置父元素text-align:center;<br>
b.垂直居中：设置子元素的line-height等于父元素的高度
<div class="box1">
<a href="">单行</a>
</div>
<hr>
<h4>2.子元素是行内元素，多行</h4>
a.水平居中:设置父元素text-align:center;<br>
b.垂直居中：父元素先设置为单元格，再垂直居中
<div class="box2">
<span>多行</span><br>
<span>文本</span>
</div>
<hr>
<h4>3.子元素是块元素</h4>
a.水平居中：设置子元素的margin:auto;<br>
b.垂直居中：与多行内联文本处理方式一致
<div class="box3">
<div class="child"></div>
</div>
<hr>
<h4>4.子元素是不定宽的块元素（如分页导航）</h4>
a.水平居中：先把子元素转为行内元素，再把父元素设置text-align:center<br>
b.垂直居中：给分页的ul加行高，使之等于父级元素高度<br>
c.底部居中（更常用）：与多行内联文本处理方式一样，vertical:bottom
<div class="box4">
<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>点击 "运行实例" 按钮查看在线实例
2、手写代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
