zoukankan      html  css  js  c++  java
  • 如何让图片文字垂直居中

     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>
  • 相关阅读:
    6月15日学习日志
    6月14日学习日志
    6月13日学习日志
    6月12日学习日志
    给建民哥的意见
    6月10日学习日志
    6月9日学习日志
    6月8日学习日志
    梦断代码读书笔记3
    第二次冲刺(六)
  • 原文地址:https://www.cnblogs.com/hwgq2005/p/3931642.html
Copyright © 2011-2022 走看看