收藏
批改状态：合格
老师批语：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用的四种对齐方式</title>
<style type="text/css">
/*1.单行文本在块元素中的水平居中和垂直居中*/
.one{
width: 200px;
height: 200px;
background-color: lightcyan;
text-align: center;
}
.one a{
line-height: 200px;
}
/*2.多行行内元素在块元素的水平居中和垂直居中*/
.two{
width: 200px;
height: 200px;
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: yellow;
}
/*3.块元素在块元素中的水平居中和垂直居中*/
.three{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
.three div{
width: 100px;
height: 100px;
background-color: green;
margin:auto;
}
/*4.不定宽元素在块元素中的居中*/
.four{
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.four ul{
padding: 0;
}
.four li{
list-style: none;
display: inline;
/*设置行高可以垂直居中*/
/*line-height: 200px;*/
}
body{
/*background-image: url(./image/6.jpg);*/
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.five li{
list-style: none;
}
.five li a{
text-decoration: none;
}
.five li a:hover{
text-decoration: underline;
color: red;
font-size:1.05em;
}
</style>
</head>
<body>
1.父元素是块元素，子元素是单行行内元素<br>
在父元素中设置text-align:center;<br>
在子元素中设置行高line-height与父元素等高<br>
<div class="one">
<a href="">PHP中文网</a>
</div>
<hr>
2.父元素是块元素，子元素是多行行内元素<br>
在父元素中设置text-align:center;<br>
把父元素的显示改为表格显示>display:table-cell;在父元素中设置垂直居中>vertical-align:middle<br>
<div class="two">
<span>网页前端学习</span><br>
<span>后端学习</span>
</div>
<hr>
3.父元素是块元素，子元素也是块元素<br>
在子元素中设置margin=auto<br>
把父元素的显示改为表格显示>display:table-cell;在父元素中设置垂直居中>vertical-align:middle<br>
<div class="three">
<div></div>
</div>
<hr>
4.父元素是块元素，子元素是不定宽的块元素<br>
在父元素中设置text-align:center;<br>
把父元素的显示改为表格显示>display:table-cell;在父元素中设置底部居中>vertical-align:bottom;<br>
<div class="four">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<hr>
<div class="five">
<h2>心目中的女神</h2>
<ul class="six">
<li><a href="">杨幂</a></li>
<li><a href="">范冰冰</a></li>
<li><a href="">刘亦菲</a></li>
<li><a href="">许晴</a></li>
<li><a href="">郑爽</a></li>
<li><a href="">余文文</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写部分：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
