HTML居中方法的尝试

最新推荐文章于 2021-07-24 19:37:54 发布

magicfly9527

最新推荐文章于 2021-07-24 19:37:54 发布

阅读量708

点赞数

分类专栏： css html 文章标签：图片 html css

本文链接：https://blog.csdn.net/magicfly9527/article/details/46888961

版权

html 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

1 CSS版利用 display: table-cell; vertical-align: middle;

<!doctype html>
<html>
<head>
    <style>
  *{padding: 0; margin:0;}
  html {background-image: url(about:blank);background-attachment: fixed;}
  body{font:12px/1.5 tahoma,微软雅黑; height: 2000px;}
  .wrap{ width: 100px; 
    height: 100px; 
    border: 1px solid #000; 
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
  }
  .wrap img{
    vertical-align: middle;   // 这里不写的话，在IE7上会上偏一点
  }
  </style>
  <!--[if lt IE 8]>
  .wrap span{
    display: inline-block;
    width: 1px;
    height: 100%;
    vertical-align: middle;
  }
  <![endif]-->
</head>
<body>
  <div class="wrap">
  <span></span>
    <img src="s.png" />
  </div>
</body>
</html>

2 JQ版

<script src="http://yygame.duowan.com/Web/Public/Jcode/js/jquery.min.js"></script>
  <style>
  *{padding: 0; margin:0;}
  body{font:12px/1.5 tahoma,微软雅黑; height: 2000px;}
  .wrap{ width: 100px; height: 100px; border: 1px solid #000;}
  </style>
</head>
<body>
  <div class="wrap">
    <img src="s.png" />
  </div>
  <script>
  $.fn.imgMiddle=function (){
    return this.each(function(){
      var src = $(this).attr('src');
      $(this).parent().css('background','url('+src+') no-repeat center');
      $(this).css('opacity',0)
    })
  }
  $('.wrap img').imgMiddle();
  </script>

3 分页居中

    <style>
  *{padding: 0; margin:0;}
  /* 解决IE6抖动Bug  确实有抖动问题 以下为解决方法*/
  html {background-image: url(about:blank);background-attachment: fixed;}

  body{font:12px/1.5 tahoma,微软雅黑; height: 2000px;}
  .page{ 
  float: left;
   position: relative; 
   left: 50%;
 }
  .page a{
    float: left; 
    position: relative; 
    right: 50%; 
    width: 30px; 
    height: 30px;
     background: green;
      color: #000; 
      line-height: 30px;
       text-align: center; 
     }
    </style>

</head>
<body>
  <div class="page">
    <a >1</a>
    <a >2</a>
    <a >3</a>
    <a >4</a>
    <a >5</a>
  </div>

以上参考张旭鑫，和大漠的有关文章，并尝试。。