收藏
批改状态：合格
老师批语：
在前端开发过程，元素对齐是最常见的一项基本操作。css对元素的对齐方式控制非常 的精准,下面我是总结的四种常见的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制元素四种对齐方式</title>
<style type="text/css">
.box1 {
width: 200px;
height:200px; background-color:#FFC0CB;
text-align: center /*水平居中:在父元素上设置: text-align:center*/
}
.box1 span {line-height:200px;} /*垂直居中:在行内子元素上设置行高与父元素相同*/
.box2{
width: 200px;
height:200px; background-color:#FFD39B;
text-align: center; /*水平居中:父元素设置text-align:center*/
display:table-cell;
vertical-align: middle; /*父元素设置:display:table-cell;vertical-align:middle*/
}
.box3{
width: 200px;
height:200px; background-color:#EEAD0E;
display:table-cell;
vertical-align: middle; /*父元素设置:display:table-cell;vertical-align:middle*/
}
.box3 .box33{
width:100px;
height:100px; background-color:#EEB4B4;
margin: auto; /*水平居中:子元素设置左右自动: margin: auto;*/
}
.box4{
width: 200px;
height:200px; background-color:#CAFF70;
text-align: center; /*水平居中:子元素转行内元素,父元素加:text-align:center*/
display:table-cell;
vertical-align: bottom; /*底边居中:vertical-align:bottom;*/
}
.box4 span {line-height:200px;}
.box4 ul{
/*line-height: 200px; /*垂直居中:可给分页的ul加行高line-height等于父级行高 */
}
.box4 li{list-style: none;
display: inline;
}
</style>
</head>
<body>
<div>
<span>子元素是行内元素</span>
<a href="baidu.com">百度</a>
</div>
<div>
<span>子元素是多行内联文本</span><br>
<a href="baidu.com">百度</a></div>
<div>
<div>
<span>子元素是块元素</span></div>
</div>
<div>
<span>子元素是不定宽的块元素</span>
<ul>
<li><a href="">1</li>
<li><a href="">2</li>
<li><a href="">3</li>
<li><a href="">...</li>
</ul>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
