本文介绍了CSS中的几种布局技巧，包括如何使用`display:table-cell`和`vertical-align:middle`实现元素垂直居中，以及利用`text-align:center`和`display:table-cell`实现底部对齐。示例代码分别展示了不同颜色背景的div元素的对齐效果。
对齐方式
span{margin: 0;padding: 0;}
.div1{
width:100px;
height: 100px;
background-color: aqua;
text-align: center;
}
.div1{line-height: 100px;}
.div2{
width:100px;
height:100px;
background-color:chartreuse;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.div3 {
width: 100px;
height: 100px;
background-color: royalblue;
display:table-cell;
vertical-align: middle;
}
.div3 div {
width: 50px;
height: 50px;
background-color: red;
margin:auto;
}
.div4 {
width: 200px;
height: 200px;
background-color: brown;
text-align: center;
display:table-cell;
vertical-align: bottom;
}
ul{padding: 0;margin: 0;}
.div4 li{list-style: none;
display: inline;
}
php中文网
www.php.cn
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
