图片垂直居中的方法

最新推荐文章于 2024-07-18 01:05:57 发布

转载最新推荐文章于 2024-07-18 01:05:57 发布 · 546 阅读

文章标签：

#css #html #图片 #垂直居中

本文介绍了一种使用CSS实现元素垂直居中的方法，并通过具体的HTML和CSS代码示例展示了如何将图片和文字等元素在网页中进行垂直居中布局。此外还提供了额外的样式设置以增强页面的美观性和布局灵活性。

方法：

.box {

display: table-cell;
vertical-align:middle;

text-align:center;

*display: block;
*font-size: 175px;
*font-family:Arial;

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {

vertical-align:middle;
}

本人的测试方法：

html{margin: 0;padding: 0;}
.box{width:500px;height:400px;display:table;}
.box span{display:table-cell;vertical-align:middle;}
.img{margin: 0;padding: 0;}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.clearfloat{zoom:1;}
.fl{float: left;}
.fr{float: right;}
.bigboxdv{background-color: #ecedf1; padding: 10px 0;border-bottom: 1px solid red;}
.img-tui{width: 50px;height: 80px; vertical-align:middle;}
.img-tel{width: 80px; height: 80px;}
.img-ren{width: 80px; height: 80px;}
.dvbox1{width: 30%;height: 200px;}
.dvbox2{width: 40%;padding-top: 50px;}
.dvbox3{width: 30%;height: 200px;}
.zwen{text-align: center;display: block;font-size: 40px;}

</style>