首页 > 代码库 > 图片在某容器内上下居中的写法

图片在某容器内上下居中的写法

前言:在一个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>

三、希望上面内容对大家有所帮组,这样写法十分巧妙,是带代码量最少的,然而并不是我原创,所以十分感谢提供这写法开发人员(自己忘了在哪看到的)。

图片在某容器内上下居中的写法