我有问题横向居中我的幻灯片图像，使他们在所有屏幕尺寸/分辨率的中心。CSS Centering幻灯片图像

的HTML看起来这样

<div id='banner'> 
    <div class='slides_container'> 
     <div> 
      <a href='#'><img src='images/banner.png'></a> 
     </div> 
     <div> 
      <a href='#'><img src='images/banner2.png'></a> 
     </div> 
    </div> 
</div>

而CSS来匹配是这样的：

#banner { 
    width:100%; 
    margin-bottom:50px; 
} 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div { 
    width:1100px; 
    height:500px; 
    text-align:center; 
}

我真的努力在这里得到图像居中的，因为所有的屏幕尺寸填充和利润不工作我需要一种不同的方法！

任何回复非常感谢。

来源

2012-05-08 James Parker

你应该确保.slides_container div是其母公司中居中，即

.slides_container div { 
    margin: 0px auto; // center 
    width:1100px; 
    height:500px; 
    text-align:center; 
}

如果不工作，你需要确保父容器是页面宽度的100％。

如果家长不宽的页面的100％，家长需要有这个属性也：

.slides_container { 
    margin: 0px auto; 
}

如果不工作，那么你需要确保其母公司为100％页面的宽度。

希望这会有所帮助。

编辑

我看了看它在Firebug，这是显而易见的是，滑容器设置为3800px宽，DIV中没有设置宽度。如果将幻灯片容器中的div设置为100％宽度，则会导致它变为3800像素宽度，因此无法使用。

根据您使用的脚本的性质，它使用了一个abolute-located div来工作。所以margin: 0px auto不会在这里工作。

该解决方案是一个JavaScript运行onload，并在窗口调整大小，以设置该图像保存为您的浏览器窗口的宽度，和文本对齐：中心。因此，例如，因为我有1280px宽屏显示器，该中心的形象对我来说：

.slides_control div { 
    width: 1280px; 
    text-align: center; 
}

来源

2012-05-08 21:20:34 Ozzy

噢，我忘了提及，如果'img'没有填充它所包含的'div'，你还需要确保'div'设置为'text-align：center;'或者使'img'宽度与容器相同 – Ozzy

嗨不幸的是上述评论没有解决这个问题:( 我得出结论，由于jQuery插件应用CSS规则的困惑，它几乎是不可能的。一旦jQuery插件div类被移除，内容包装设置为'text-align：center'，图像中心就完美了。我猜我必须尝试一个不同的幻灯片插件，除非你认为你可以进一步只是为了说明我已经尝试使用！重要的。 –

@ LiquidFusi0n如果你有IE9或FireFox冷杉eBug，按F12查看开发人员工具，点击“箭头”图标，选择相关容器，然后查看实际应用到的CSS，稍作调查即可查找。 – Ozzy

通常他们用margin:0 auto;来解决这个问题。 text-align不会对你有好处div。

来源

2012-05-08 17:48:11 5566

添加.slides_container img和margin:0 auto

#banner { width:100%; margin-bottom:50px; } 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div, .slides_container img { 
    width:1100px; 
    height:500px; 
    text-align:center; 
    margin:0 auto; }

来源

2012-05-08 17:55:56 breezy

感谢不幸的是这并没有达到定心的反应，其实在屏幕上的结果也没有改变。 –

你能提供一个链接，看看你的看到？ – breezy

当然可以。 http://tinypic.com/r/246jiav/6 正如你所看到的幻灯片的图像保持在左边。 –

CSS Centering幻灯片图像

回答

编辑

相关问题