图片在某容器内上下居中的写法
时间：11-28来源：作者：点击数：
前言：在一个web项目中，图片居中这种需求很常见。为此我也看试了好多写法大部分外部图片容器都是div换了别的标签就不好使了，其中下面我要介绍的就是我认为最好的写法，希望对开发者有所帮助。
一、H5代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.imagecan{
border:1px solid red;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="imagecan" style="display: table;text-align: center;">
<span style="display:table-cell; vertical-align:middle;">
<img src="r_book1.jpg" height="239" width="332"/>
</span>
</div>
</body>
</html>
二、简要说明：
在这我写图片容器是在div里，当然你也可以在dd、dt、li里效果都一样。然后将容器属性设置："display: table;text-align: center;"，并且添加<span>标签，将图片包在里面然后span属性设置：display:table-cell; vertical-align:middle;
具体模版是这样：
<div class="imagecan" style="display: table;text-align: center;">
<span style="display:table-cell; vertical-align:middle;">
<img src="r_book1.jpg"/><!--只需要修改这图片-->
</span>
</div>
三、希望上面内容对大家有所帮组，这样写法十分巧妙，是带代码量最少的，然而并不是我原创，所以十分感谢提供这写法开发人员（自己忘了在哪看到的）。
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号