收藏
批改状态：合格
老师批语：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.css控制元素的对齐技巧</title>
//父元素下子元素居中
text-align:center;
display:table-cell;
vertical-align:middel;
<style>
.box1{
width:200px;
height: 200px;
background-color: #ffff0a;
text-align: center; /*使行内元素在块元素中水平居中*/
/*修改display 属性*/
/*以下两行声明可以使用多个行内元素在块元素中垂直居中*/
display: table-cell; /*把父元素变成单元格*/
vertical-align: middle; /*设置单元格内元素垂直居中*/
}
.box1 a {
/*line-height: 200px;*/
}
.box2{
width:200px;
height: 200px;
background-color: #888;
text-align: center;
display: table-cell; /*把父元素变成单元格*/
vertical-align: middle; /*设置单元格内元素垂直居中*/
}
.box3{
width: 200px;
height: 200px;
background-color: #6cf;
display: table-cell; /*把父元素变成单元格*/
vertical-align: middle; /*设置单元格内元素垂直居中*/
}
.box3 .child{
width: 100px;
height: 100px;
background-color: #f4ff0a;
/*外边距。在外面做居中*/
/*块元素在块元素中水平居中*/
margin:auto;
/*margin-left: auto;
margin-right: auto;*/
/*以下两行声明可以使用多个行内元素在块元素中垂直居中*/
}
.box4{
width:200px;
height:200px;
background-color:#6cf;
/*不定宽的子元素在块元素中水平居中*/
text-align: center;
/*改造并底边居中*/
display: table-cell;
vertical-align: bottom;
}
/*设置ul ui没有小圆点。。并且是行内显示*/
.box4 li{
list-style:none;
display:inline;
}
.box4 ul{
padding-left: 0px;
/*line-height: 200px;*/
}
</style>
</head>
<body>
<!-- 块级元素下的子元素 -->
<h4>父元素一定是个块元素，根据子元素的不同，有以下几种对齐方式：</h4>
1.子元素是行内元素：如：a,span,<br>
a:水平居中：在父元素上面设置：text-align:center;<br>
b:垂直居中：在行内元素(子元素)设置行高与父元素等号：line-height
<div class="box1">
<a href="">PHP中文网</a>
</div>
<hr>
2.多行文本居中，子元素是多行的内联/行内文本
a:水平居中：在父元素上面设置：text-align:center;<br>
b:垂直居中：父元素上设置display:table-cell;vertical-align:middle
<div class='box2'>
<a href="">PHP中文网</a><br>
<span>www.php.cn</span>
</div>
<hr>
3.子元素是块元素：<br>
a:水平居中：子元素上设置左右自动：margin:auto;
b:垂直居中：父元素上设置display:table-cell;vertical-align:middle
<div class="box3">
<div class="child"></div>
</div>
4.子元素是不定宽的块元素：最常见的就是分页导航
a:水平居中：在父元素上面设置：text-align:center;<br>b.垂直居中，在ul中加行高line-height==父元素的高度<br>
c.底边居中：更为常用，与多行文本垂直居中的处理方式是一样的
vertical-align:bottom;
<div class="box4">
<!-- ul>li*5>a -->
<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>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css居中</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: yellow;
/*设置行内元素居中*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box2{
width: 80px;
height: 80px;
background-color: lightskyblue;
/*设置子块居中*/
margin:auto;
}
.box3{
width: 80px;
height: 80px;
background-color: #888;
/*设置子块居中*/
margin:auto;
}
.box5{
width:400px;
height: 400px;
background-color: red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box5 img{
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"><a href="">adsfas</a></div>
<div class="box3"></div>
</div>
<hr>
<div class="box5">
<img src="/images/001.jpg">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
