前言：在一个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>
三、希望上面内容对大家有所帮组，这样写法十分巧妙，是带代码量最少的，然而并不是我原创，所以十分感谢提供这写法开发人员（自己忘了在哪看到的）。
时间： 2024-11-17 01:59:30