zoukankan      html  css  js  c++  java
  • css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)

    一、原始的居中方法是把div换成table

    <div style=" 500px; height: 200px; border: solid 1px red; text-align: center">

       <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
    </div
    <div style=" 500px; height: 200px; border: solid 1px red;">
       <center>
          <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
       </center>
    </div>
    <table style=" 500px; height: 200px; border: solid 1px red; text-align:center">
      <tr>
          <td>
          <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
          </td>
      </tr>
    </table>
     
    二、但是如果外层div是浮动且按照百分比排列的话,你要怎么做?
    此时,请看图下的关键代码,可实现不同分辨率下的图片垂直左右居中。

    <!doctype html>

    <html>
    <head>
    <meta charset="utf-8">
    <title>图片垂直水平居中</title>
    <style>
    div{height:500px;400px;text-align:center;border:1px solid #000;margin:20px auto;}
    img{vertical-align:middle;}  /* 关键代码 */
    span{height:100%;display:inline-block;vertical-align:middle;} /* 关键代码 */
    </style>
    </head>
     
    <body>
        <div>
            <img src="http://img.o571.com/fc/ad/20130827161606949.jpg" width="323" height="215" />
            <span></span>
        </div>
    </body>
    </html>
  • 相关阅读:
    数组指针和指针数组
    C#反射机制
    浅探委托(delegate)和事件(event)
    C#的is和as操作符来进行强制类型转换&&值类型的拆箱、装箱
    2018-2-8
    JSP--语法
    JSP中的<%%>,<%! %>,<%= %>,<%-- --%>
    JSP--简介
    springmvc实现文件下载到Android手机设备pda端
    常用的正则表达式(转)
  • 原文地址:https://www.cnblogs.com/ibingbing/p/5803266.html
Copyright © 2011-2022 走看看