码迷,mamicode.com
首页 > 其他好文 > 详细

如何让图片文字垂直居中

时间:2014-08-23 20:16:51      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   ar   div   html   log   line   sp   

 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>

 

如何让图片文字垂直居中

标签:style   blog   color   ar   div   html   log   line   sp   

原文地址:http://www.cnblogs.com/hwgq2005/p/3931642.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!