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

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

  •  0
  • 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 年前
        1
  •  2
  •   Gavin Thomas    7 年前

    你需要弄清楚 position 属性

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

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

        2
  •  1
  •   Mustafa Çetin    7 年前

    尝试相对

    #BG {
       position: relative;
    }
    
        3
  •  1
  •   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;
            }
    
        4
  •  0
  •   user8158111 user8158111    7 年前

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