收藏
批改状态：未批改
老师批语：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<title>垂直对齐的几种方式</title>
</head>
<body>
<style>
/*1.子元素是行内元素如a,span,p 设置水平居中：text-align:center;
设置垂直居中:与父元素等高：line-height:父元素高度*/
.box1{
width: 200px;
height:200px;
background-color: lightpink;
text-align: center;
line-height: 200px;
}
/*2.子元素是行内元素且多行，设置水平居中：text-align:center;设置垂直居中：先变成单元格，再居中 */
.box2{
width: 400px;
height:200px;
background-color: lightgrey;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/*3.子元素是块级元素，设置水平居中：margin: auto ;设置垂直居中：先变成单元格，再居中 */
.box3{
width: 200px;
height:200px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
.box4{
width: 100px;
height:100px;
background-color: pink;
margin: auto ;/*水平居中*/
}
/*4.子元素是不定宽块级元素，设置水平居中：text-align:center ;设置垂直居中：先变成单元格，再居中
或者直接 line-height:父元素高度*/
.box3{
width: 200px;
height:200px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
.box4{
width: 100px;
height:100px;
background-color: pink;
margin: auto ;/*水平居中*/
}
.box5{
width: 200px;
height:200px;
background-color: grey;
text-align: center;
/*line-height: 200px;可以 */
display: table-cell;
/* vertical-align: middle; 可以 */
vertical-align: bottom; /*居底 */
}
.box5>ul{
margin: 0;
padding-left: 0;
margin-bottom: 10px;
}
ul li {
display: inline;
}
</style>
<div class="box1">
<a href="http://www.baidu.com">百度</a>
</div>
<div class="box2">
<span>php学习去哪里？</span><br />
<a href="http://www.php.cn"> http://www.php.cn </a>
</div>
<div class="box3">
<div class="box4"></div>
</div>
<div class="box5">
<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>点击 "运行实例" 按钮查看在线实例
感悟：根据子元素的不同类型，简单应用实例证实其与当前父元素之间，如何实现垂直对齐的几种方法，可供参考！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
