如何让图片文字垂直居中

最新推荐文章于 2023-07-17 17:40:55 发布

aixi1020

最新推荐文章于 2023-07-17 17:40:55 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/hwgq2005/p/3931642.html

版权

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <style type="text/css">
 5 <!--
 6 * {margin:0;padding:0}
 7 .one{
 8     width:500px;
 9     height:500px;
10     border:1px solid red;
11     text-align:center;
12 }
13 .one img{
14     width:100px;
15     vertical-align: middle;
16 }
17 
18 p:after{
19   display:inline-block;
20   height:100%; 
21   vertical-align:middle;
22   content:"";
23 }
24 </style>
25 </head>
26 <body>
27     
28     <div class="one">
29         <a href="#" style="height:100%;vertical-align:middle;display:block;">文字居中<i style="display:inline-block;height:100%; vertical-align:middle"></i></a>
30     </div>
31 
32     
33     <div class="one">
34         <img src="one.jpg" />图片居中<i style="display:inline-block;height:100%; vertical-align:middle"></i>
35     </div>
36 
37     
38     <div class="one">
39         <p><img src="one.jpg" alt="" />图片居中</p>
40     </div>
41 </body>
42 </html>