图片在某容器内上下居中的写法
Posted 吃个大西瓜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片在某容器内上下居中的写法相关的知识，希望对你有一定的参考价值。
前言：在一个web项目中，图片居中这种需求很常见。为此我也看试了好多写法大部分外部图片容器都是div换了别的标签就不好使了，其中下面我要介绍的就是我认为最好的写法，希望对开发者有所帮助。
一、H5代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .imagecan{ 8 border:1px solid red; 9 width: 400px; 10 height: 300px; 11 } 12 13 </style> 14 </head> 15 16 <body> 17 <div class="imagecan" style="display: table;text-align: center;"> 18 <span style="display:table-cell; vertical-align:middle;"> 19 <img src="r_book1.jpg" height="239" width="332"/> 20 </span> 21 </div> 22 </body> 23 </html>
二、简要说明：
在这我写图片容器是在div里，当然你也可以在dd、dt、li里效果都一样。然后将容器属性设置："display: table;text-align: center;"，并且添加<span>标签，将图片包在里面然后span属性设置：display:table-cell; vertical-align:middle;
具体模版是这样：
1 <div class="imagecan" style="display: table;text-align: center;"> 2 <span style="display:table-cell; vertical-align:middle;"> 3 <img src="r_book1.jpg"/><!--只需要修改这图片--> 4 </span> 5 </div>
三、希望上面内容对大家有所帮组，这样写法十分巧妙，是带代码量最少的，然而并不是我原创，所以十分感谢提供这写法开发人员（自己忘了在哪看到的）。
以上是关于图片在某容器内上下居中的写法的主要内容，如果未能解决你的问题，请参考以下文章