居中包含图像的div

我正在尝试将图像居中，但未能如此。我添加了保证金：auto;图像但不工作。删除浮动时：left;从旋转木马，结构变得混乱。居中包含图像的div

如何将图像居中？

由于

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var showing_default = true; 
       var did_scroll = false; 

       $(window).on("scroll", function (e) 
       { 
        did_scroll = true; 
       }); 

       window.setInterval(function() 
       { 
        if (did_scroll) 
        { 
         did_scroll = false; 

         if (showing_default && $(document).scrollTop() >= 100) 
         { 
          showing_default = false; 
          $("#header").css('position', 'fixed'); 
          $("#default").stop().hide(); 
          $("#sticky").fadeIn(500); 
         } 
         else if (! showing_default && $(document).scrollTop() < 100) 
         { 
          showing_default = true; 
          $("#sticky").stop().hide(); 
          $("#default").fadeIn(500); 
          $("#header").css('position', 'fixed'); 
         } 
        } 
       }, 250); 
      }); 
     </script> 

     <style> 
      * 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      #header, #default, #carousel, #body, #footer 
      { 
       display: block; 
       width: 100%; 
      } 
      /* --- HEADER ------------------------------------------------------------------ */ 
      #header, #default, #sticky 
      { 
       background: #EEEEEE; 
      } 
      #header 
      { 
       position: fixed; 
       z-index: 100; 
       border-bottom: 1px solid #CCCCCC; 
      } 
      #default 
      { 
       height: 100px; 
      } 
      #sticky 
      { 
       display: none; 
       height: 50px; 
      } 
      /* --- CAROUSEL ---------------------------------------------------------------- */ 
      #carousel 
      { 
       margin-top: 101px; 
       float: left; 
       height: 400px; 
       background: #FFFFFF; 
      } 
      #images 
      { 
       position: absolute; 
      } 
      .image 
      { 
       display: none; 
       position: absolute; 
       width: 900px; 
       height: 400px; 
      } 
      .image img 
      { 
       width: 900px; 
       height: 400px; 
      } 
      .first 
      { 
       display: block; 
      } 
      /* --- BODY -------------------------------------------------------------------- */ 
      #body 
      { 
       background: #EEEEEE; 
      } 
      /* --- FOOTER ------------------------------------------------------------------ */ 
      #footer 
      { 
       background: #DDDDDD; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="header"> 
      <div id="default">DEFAULT HEADER</div> 
      <div id="sticky">STICKY HEADER</div> 
     </div> 

     <div id="carousel"> 
      <div id="images"> 
       <div class="image first"><img src="images/1.jpg" /></div> 
       <div class="image"><img src="images/2.jpg" /></div> 
       <div class="image"><img src="images/3.jpg" /></div> 
       <div class="image"><img src="images/4.jpg" /></div> 
      </div> 
     </div> 

     <div id="body">TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM</div> 

     <div id="footer">FOOTER</div> 
    </body> 
</html>

来源

2013-08-23 BentCoder

你使用的结构是这样的：

<div id="images"> 
    <div id="image">...</div> 
    <div id="image">...</div> 
    <div id="image">...</div> 
    <div id="image">...</div> 
</div>

所以我建议居中的div代替，并在图像上到div宽度适应... 独特的问题我的解决方案可能是图像大小不同。

U可以检查我的例子拨弄： http://jsfiddle.net/zsfjL/11/ http://jsfiddle.net/zsfjL/10/embedded/result/

来源

2013-08-23 18:20:59 cl0udw4lk3r

添加margin-left:半元件（负值）和left:50%的总宽度的

定制CSS：

#images 
    { 
     position: absolute; 
     margin-left: -450px; 
     left: 50%; 
    }

小提琴：http://jsfiddle.net/Vs65D/show

来源

2013-08-23 16:40:11

当定心的图像与“保证金：0自动“声明，你还需要”display：block“声明（div元素不需要这个）。

.photo { display: block; margin: 0 auto; }

来源

2013-08-23 16:43:14

有几个不同的路线，你可以去这里，所以在给出答复之前，我想解释一下......布伦丹·赖斯是正确的，保证金：0汽车;仅适用于块级元素，默认情况下IMG不是块级。我还必须补充说明该元素需要指定的宽度小于100％才能工作。

浏览器为每个HTML对象分配默认属性，您可以使用CSS覆盖它。显示是一个规则描述这个元素将控制的流量和空间的类型（更多细节在这里：http://css-tricks.com/almanac/properties/d/display/）。块级元素（如DIV或P标签）默认情况下宽度为其容器的100％。这会导致在它之前和之后返回一行。

当我们希望居中块级元素时，通常会覆盖宽度然后设置边距：0 auto;当我们想要将一个内联对象居中时，text-align：center;是惯例。

在你的情况下，我会从设置位置开始：relative;并在div＃旋转木马上指定宽度，因为这些宽度在使用浮动规则时指示。位置：你的旋转木马div和图像div绝对需要吗？如果是这样，我会将display:block;margin:0 auto;添加到您的.image img规则中。

来源

2013-08-23 18:20:03 ph33nyx

居中包含图像的div

回答

相关问题