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

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

2024-09-25 21:49:39   217人阅读

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

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

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


联系
我们