图像拒绝居中答案

【问题标题】：Images refuse to center图像拒绝居中
【发布时间】：2012-04-10 08:20:58
【问题描述】：

图像拒绝在 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>

如何强制他们居中？

【问题讨论】：

您不能在绝对定位的元素上使用边距。重写你的 Javascript 以根据图像的宽度和换行计算正确的left 位置（即，[图像的换行宽度]/2）。
你的javascript没有任何意义，内部函数什么也没做，你每100毫秒将宽度重置为css..为什么？

标签： css image center centering

【解决方案1】：

使用下面的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】：

你到底想用你的区间函数来实现什么？

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

以及图像中的绝对位置。

【讨论】：