Question

我有以下幻灯片，它是屏幕宽度的100％。我需要将banner_slideshow_controls div放在中间位置。

我已经尝试将幻灯片放映的主容器设置为相对，然后将div设置为绝对但是这不会位于中间，除非我设置宽度和边距：幻灯片上的0自动，我不能做我需要的它是100％。

有人可以建议解决这个问题吗？

    <div id="banner_slideshow_container">
                    <div id="banner_slideshow">
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner1.jpg)"></a>
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner2.jpg)"></a>
                        <a href="about-us.php"  style="background-image: URL(ui/banners/banner3.jpg)"></a>
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner4.jpg)"></a>
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner5.jpg)"></a>
                    </div>
                    <div id="banner_slideshow_controls">
                        <div class="slideshow_caption">TEXT FOR BANNER</div>
                        <div class="slideshow_button">More Information</div>
                            <div id="prev" class="img_replace">Previous</div>
                            <div id="next" class="img_replace">Next</div>
                  </div>     
                </div>

#banner_slideshow_container {
    width: 100%;
    height: 366px;
    margin-top: 339px;
    background-color:#ccc;
}

#banner_slideshow {height:366px}

#banner_slideshow a{
    width:100%;
    height:100%;
    display:block;

}


#banner_slideshow_controls {
position:relative;
top:-100px;
margin: auto 0;
width:900px;
 z-index:10;
border:2px solid green

}

非常感谢，

Answer 1

如果要水平居中，左边距和右边距必须为auto，因此边距：0自动或更短margin: auto（因为默认div边距为0）

或者如果您想使用绝对位置，请添加到#banner_slider_container position: relative，然后绝对定位（如果您不知道容器宽度，则可以使用left: 50%; margin-left: -450px）< / p>

Answer 2

margin: x y是 -

的简写

margin-top: x
margin-bottom: x
margin-right: y
margin-left: y

如果我理解正确的要求 - 在margin : 0 auto

上设置#banner_slideshow_controls而不是相反

通过这样做，你可以将左，右边距设置为'auto'，将top，bottom margin设置为0 - 这将div放在中间。

CSS center在100％宽度幻灯片放映之上对齐div

2 个答案: