Question

图片拒绝以html代码为中心。宽度是自动的，必须是。我正试图使用保证金居中图像：自动居中。画廊应该比视口宽。 Css和javascript：

    #gallery{
        position:fixed;
        top:0px;
        left:50%;
        width:6000px;
        height:100%;
        margin-left:-3000px;
        background-image:url('images/bluey.jpg');
        background-position:center center;
        background-repeat:no-repeat;
        background-color:red;
    }
    .galimag{
        opacity:0.5;
        position:absolute;
        margin-left:auto;
        margin-right:auto;
        width:auto;
        height:80.3%;
        top:10.2%;
    }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    var T = setInterval(function(){
        $('img.galimag').css('width','auto');
        $('img.galimag').each(function(){
            var w = $(this).width();
            $(this).width(w);
        });
    },100);
</script>

Html在这里：

    <body>
      <div id="gallery">
          <img class="galimag" src="/images/grid.jpg"  alt="img"/> 
              <img class="galimag" src="/images/referrals.2.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.3.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.4.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.5.jpg"  alt="img"/>
      </div>
      <div id="controls"></div>
      <div id="ipad-controls"></div>  
  </body>

如何强迫他们居中？

Answer 1

你想用间隔功能实现什么目的？

将#gallery设置为text-align:center;

图像中的绝对位置。

Answer 2

使用下面的center标记或将text-align: center;设置为父容器即可。

我还强烈建议你删除你的javascript，因为它实际上什么都不做，只是在错误地把控制台垃圾邮件。

  <body>
      <div id="gallery">

<center>

          <img class="galimag" src="/images/grid.jpg"  alt="img"/> 
              <img class="galimag" src="/images/referrals.2.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.3.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.4.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.5.jpg"  alt="img"/>

<center>

      </div>


      <div id="controls"></div>
      <div id="ipad-controls"></div>  
  </body>

图像拒绝居中

2 个答案: