Question

我最近决定更改div（#BG），它会自动使用css规则将其水平居中：

保证金：25px auto 0 auto

不幸的是，这也使得其中的其他div（#nextBtnBG和#nextBtn）不像过去那样对齐。如果我使窗口变宽，它会改变位置，因为它固定在div #BG内部窗口的左侧或右侧。

<div id="BG">

    <div id='slideHolder'>
        <img id='slide' class="centerSlide" src="img/1.png" alt="" />
        <div onclick="prevSlide(event)" id="prevBtnBG">
            <div onclick="prevSlide(event)" id="prevBtn"><</div>
        </div>
        <div onclick="nextSlide(event)" id="nextBtnBG">
            <div onclick="nextSlide(event)" id="nextBtn">></div>
        </div>

    </div>

</div>

所以#slide是一个图像，前一个和下一个按钮应该浮在它上面，这就是它使用绝对位置的原因。 #prevBtnBG和#prevBtn工作正常。它是#nextBtnBG和#nextBtn的问题。

我的CSS：

#prevBtnBG {
    position: absolute;
    top: 25px;
    width:250px;
    height:720px;
    background-color: rgba(90, 90, 90, 0.2);
}

#prevBtn {
    color:white;
    font-size: 80px;
    position: relative;
    top: 310px;
    left: 105px;
    cursor: default;
}

#nextBtnBG {
    position: absolute;
    top: 25px;
    right: 250px;
    width:250px;
    height:720px;
    background-color: rgba(90, 90, 90, 0.2);
}

#nextBtn {
    color:white;
    font-size: 80px;
    position: relative;
    top: 310px;
    right: 105px;
    cursor: default;
}

#BG {
    width: 1280px;
    height: 800px;
    border: 0px solid black;
    margin: 25px auto 0 auto;
}

Answer 1

您需要弄清楚position属性。

如果您的元素完全基于父级定位，则父级应为position: relative;。

此外，您还在容器中的元素上使用绝对定位。（背景中的按钮）

Answer 2

尝试亲戚

#BG {
   position: relative;
}

Answer 3

请在下面添加html和css代码。我希望在使用此代码后解决您的问题

HTML：

<div id="BG">
            <div id='slideHolder'>
                <div class="centerSlide">
                    <img id='slide' src="images/1.jpg" alt="" />
                </div>
                <div onclick="prevSlide(event)" id="prevBtnBG">
                    <div onclick="prevSlide(event)" id="prevBtn"><</div>
                </div>
                <div onclick="nextSlide(event)" id="nextBtnBG">
                    <div onclick="nextSlide(event)" id="nextBtn">></div>
                </div>
            </div>
        </div>

CSS：

#BG {
        max-width: 1280px;
        height: 100vh;
        border: 0px solid black;
        margin: 0 auto;
        overflow: hidden;
        }
        img{
            max-width: 100%;
        }
        #slideHolder{
            position: relative;
        }
        #prevBtnBG,
        #nextBtnBG{
            position: absolute;
            background-color: rgba(0,0,0,.5);
            top: 0;
            bottom: 0;
            color: #ffffff;
            font-size: 30px;
            width: 12%;
        }
        #prevBtnBG{
            left: 0;
        }
        #nextBtnBG{
            right: 0;
        }
        #prevBtn,
        #nextBtn{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            cursor: default;
        }
        .centerSlide{
            line-height: 0;
        }

Answer 4

如果要右对齐任何元素，请在标记中使用：style="float: right;"。

我无法在div中正确对齐div，自动居中

4 个答案: