css display:table-cell图片垂直居中的例子_css教程

css display:table-cell图片垂直居中的例子: 发布时间：2020-07-14编辑：脚本学堂

css使用display:table-cell实现图片垂直居中，测试过IE8及以上版本及大部分的主流浏览器，ie7及以下浏览器不兼容，需要的朋友参考下。

在E8及以上版本及大部分的主流浏览器测试效果

复制代码代码示例:

<div class="img">

<img src="../images/a-1.jpg" alt="" />

</div>

css样式：

复制代码代码示例:

.img{

    display:table-cell;

    vertical-align:middle;

    width:400px; height:500px;

    text-align:center;

    border:#CCC 1px solid;

}

/*IE7不支持该方法*/

上一篇：css禁止文本自动换行禁止出现滚动条
下一篇：css div水平居中与垂直居中多个例子

与 css display:table-cell图片垂直居中的例子有关的文章

本文标题：css display:table-cell图片垂直居中的例子
本页链接：http://www.jb200.com/article/29252.html

css display:table-cell图片垂直居中的例子

css display:table-cell图片垂直居中的例子

与 css display:table-cell图片垂直居中的例子有关的文章

浏览排行

栏目分类

栏目导航

热点文章

css display:table-cell图片垂直居中的例子

css display:table-cell图片垂直居中的例子

与 css display:table-cell图片垂直居中的例子 有关的文章

浏览排行

栏目分类

栏目导航

热点文章

与 css display:table-cell图片垂直居中的例子有关的文章