css图片垂直居中

最新推荐文章于 2024-11-06 07:17:43 发布

牛得草

最新推荐文章于 2024-11-06 07:17:43 发布

阅读量211

点赞数

分类专栏： css 文章标签： css class border html div

本文链接：https://blog.csdn.net/shawon/article/details/7580279

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css图片垂直居中，比较简单的实现方法：

html:

<div class="testBox">
<span class="hook"></span>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="图片垂直居中" />
</div>

style:

.testBox{border:1px solid #ccc;width:500px;height:400px;text-align:center;}
.testBox .hook{display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}
.testBox img{vertical-align:middle;border:0 none;}