代码之家 › 专栏 › 技术社区 › Chewie The Chorkie

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

css html

Chewie The Chorkie · 技术社区 · 7 年前

我最近决定对div(#BG)进行更改,它会自动使用css规则将其水平居中:

边距:25px自动0自动

不幸的是,这也使得它内部的其他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;
}

4 回复 | 直到 7 年前

Gavin Thomas 7 年前

你需要弄清楚 position 属性

如果元素的位置完全基于父元素,则父元素应为 position: relative; 。

此外,您正在容器中的元素上使用绝对定位。(背景中的按钮)

Mustafa Çetin 7 年前

尝试相对

#BG {
   position: relative;
}

Nimantha Thatkookooguy 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;
        }

user8158111 user8158111 7 年前

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