• 怎样使图片在div中垂直居中【兼容IE6和火狐浏览器】


    本文转载自:IT技术精粹 http://www.jishubu.com

    一下是网页代码,把以下全部代码粘贴到DW的代码模式,去不覆盖即可!

    方法一(CSS)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>图片在div中垂直居中</title>

    <style type="text/css">

    body { margin:0; padding:0; text-align:center;}

    * { margin:0; padding:0; }

    /* .img_vm{ margin:100px; padding:10px; 500px; height:500px; vertical-align:middle; border:1px dashed red; background:url(images/exampleimg/example_02.jpg) no-repeat center;} */  /* 背景图片垂直居中 */

    .img_vm { margin:100px auto; padding:0; 600px; height:500px; border:1px dashed red; text-align:center; vertical-align:middle; position:relative; line-height:500px; font-size:0;}

    .img_vm P{+position:absolute;top:50%; }

    .img_vm P img { +position:relative;top:-50%; left:-50%;  vertical-align:middle;}

    .img_vm p:after {content:".";font-size:1px;visibility:hidden;} /* 此样式专对火狄浏览器还设 */

    </style>

    </head>

    <body>

      <div class="img_vm"><p><img src="img/pic01.jpg" /></p></div>

    </body>

    </html>

    方法二(JavaScript)

    <div style=" text-align:center;border:solid #006633 1px; 200px; height:200px; padding:0; font-size:0; line-height:0;">

     <img src="http://bbs.51js.com/images/default/logo.gif" onload="this.style.marginTop=((this.parentElement.offsetHeight-this.offsetHeight)/2);" style="margin-top:0px;" />

    </div>

    方法三(CSS)至今为止最简洁的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Div图片垂直居中的方法</title>

    </head>

    <style>

    .box {

    display: table-cell;

    vertical-align:middle;

    text-align:center;

    *display: block;

    *font-size: 175px;

    *font-family:Arial;

    200px;

    height:200px;

    border: 1px solid #eee; }

    .box img {

    vertical-align:middle; border:0;}

    </style>

    <body>

    <div class="box">

    <a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a>

    </div>

    </body>

    </html>

  • 相关阅读:
    全球化编码
    linuxGrep命令
    Xcode-插件所在路径
    多控制器间数据传递
    触摸事件
    IOS事件处理
    事件监听的三种方法
    UITabBarController
    聊天布局
    Info.plist:项目配置文件
  • 原文地址:https://www.cnblogs.com/dmyao/p/2398022.html
Copyright © 2020-2023  润新知