• 注册
  • 关于作者
    企业认证:趣记站长
    关注 6 粉丝 4 喜欢 9 内容 992
    江西省·南昌市
    聊天 送礼
    • 查看作者
    • CSS图片垂直居中方法整理集合

      一、基本方法:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <style type="text/css">
      <!--
      * {margin:0;padding:0}
      div {
         width:500px;
         height:500px;
         border:1px solid #ccc;
         overflow:hidden;
         position:relative;
         display:table-cell;
         text-align:center;
         vertical-align:middle
         }
      div p {
         position:static;
         +position:absolute;
         top:50%
         }
      img {
         position:static;
         +position:relative;
         top:-50%;left:-50%;
         width:276px;
         height:110px
         }

      -->
      </style>

      <div><p><img src="

      二、标准浏览器下另类方法:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <style type="text/css">
      <!--
      body {
          margin:0;padding:0
          }
      div {
          width:500px;
          height:500px;
          line-height:500px;
          border:1px solid #ccc;
          overflow:hidden;
          position:relative;
          text-align:center;
          margin:auto
          }
      div p {
          position:static;
          +position:absolute;
          top:50%
          }
      img {
          position:static;
          +position:relative;
          top:-50%;left:-50%;
          width:276px;
          height:110px;
          vertical-align:middle
          }
      p:after {
          content:".";font-size:1px;
          visibility:hidden
          }
      -->
      </style>

      <div><p><img src="<A href='/uploadfiles/2008/03131204580.gif"/></p></div>

      三、标准浏览器严格型申明下:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <style type="text/css">
      <!--
      * {margin:0;padding:0}
      div {
          width:500px;
          height:500px;
          line-height:500px;
          border:1px solid #ccc;
          overflow:hidden;
          position:relative;
          text-align:center;
          }
      div p {
          position:static;
          +position:absolute;
          top:50%;
          vertical-align:middle
          }
      img {
          position:static;
          +position:relative;
          top:-50%;left:-50%;
          width:276px;
          height:110px;
          vertical-align:middle
          }

      IE BUG,margin 两倍

      HTML&CSS

      -->
      </style>

      <div><p><img src="

      四、利用字体大小的方法:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      <style type="text/css">
      * {margin:0;padding:0;}
      div {
          width:500px;text-align:center;border:1px solid #f00;line-height:500px;
          height:500px;font-size:500px
          }
      *>div{
          font-size:12px
          }
      div img {
          vertical-align:middle
          }
      </style>

      <div>
      <img src="</div>

      五、最简单当然是背景图片的方法啦
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      <style type="text/css">
      * {margin:0;padding:0;}
      div {
          width:500px;border:1px solid #f00;
          height:500px;
          background:url("    }
      </style>

      <div>
      </div>

      IE BUG,margin 两倍

      HTML&CSS

    • 0
    • 0
    • 0
    • 77
    • 单栏布局 侧栏位置: