<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素对齐方式</title>
</head>
<body>
<h3>元素对齐方式，容器用DIV来做</h3>
1.子元素是单行的行内元素，a标签，span <br>
a:水平居中：在父元素应用：text-align:center;
b.垂直居中，在当前行内子元素设置行高与父元素等高：line-height:200px;
<style>
.box1{
width:200px;
height:200px;
background-color:#ffff0a;
text-align:center; /*水平居中了*/
}
.box1 a{
line-height:200px;
}
</style>
<div>
<a href="www.php.cn">PHP中文网</a>
</div>
<hr>
<style>
.box2{
width:200px;
height:200px;
background-color:lightgreen;
text-align:center; /*水平居中了*/
display:table-cell;/*垂直居中设置*/
vertical-align: middle;/*垂直居中设置*/
}vertical-align:middle;
.box2
</style>
2.子元素是多行的内连文本
a:水平居中：在父元素应用：text-align:center;
b.垂直居中，在父元素的display由block改成table-cell,增加vertical-align: middle;
<div>
<span>php中文网</span> <br>
<span>www.php.cn</span>
</div>
<hr>
3.子元素是个块元素
a.水平居中，子元素设置左右外边距自动居中,margin:auto;
b.垂直居中，在父元素的display由block改成table-cell,增加 vertical-align: middle；
<style>
.box3{
width:200px;
height:200px;
background-color:lightgreen;
display:table-cell;/*垂直居中设置*/
vertical-align: middle;/*垂直居中设置*/
}
.box3 .child{
width:100px;
height:100px;
background-color:lightcoral;
margin:auto;
}
</style>
<div>
<div></div>
</div>
<hr>
4.子元素不是定宽的块元素，比如分页（分页的页数随机）
a.水平居中，在父元素应用：text-align:center;
b.垂直居中，在父元素的display由block改成table-cell,增加vertical-align: middle;
<style>
.box4{
width:200px;
height:200px;
background-color:lightblue;
text-align:center; /*水平居中，在父元素应用：text-align:center;*/
margin:0; /* 清除外边距*/
padding:0; /*清除内边距*/
display:table-cell;/*垂直居中设置*/
vertical-align: bottom;/*位于底部*/
}
.box4 li{
display:inline;/* 由垂直排列转成横向的行内排列 将块元素转成行内元素*/
}
</style>
<div>
<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>
</ul>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
