css 如何在我的图片滑块上居中图片和单选按钮？

jv4diomz  于 2023-03-20  发布在  其他
关注(0)|答案(2)|浏览(112)

我创建了一个图像滑块，但我不知道如何居中，即使我尝试使用justify-content和align-items属性，但它不工作。
我尝试使用justify-content和align-items属性，但是图像和单选按钮没有居中。
下面是我的代码：

`
<!--image slider start-->
        <div class="slider">
            <div class="slides">
                <!--radio buttons start-->
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <!--radio buttons end-->
                <!--slide images start-->
                <div class="slide first">
                    <img src="images/slider-1.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-2.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-3.jpg" alt="">
                </div>
                <div class="slide">
                    <img src="images/slider-4.jpg" alt="">
                </div>
                <!--slide images end-->    
                <!--automatic navigation start-->
                <div class="nav-auto">
                    <div class="auto-btn1"></div>
                    <div class="auto-btn2"></div>
                    <div class="auto-btn3"></div>
                    <div class="auto-btn4"></div>
                </div>
                <!--automatic navigation end-->                          
            </div>
            <!--manual navigation start-->
            <div class="nav-manual">
                <label for="radio1" class="manual-btn"></label>
                <label for="radio2" class="manual-btn"></label>
                <label for="radio3" class="manual-btn"></label>
                <label for="radio4" class="manual-btn"></label>
            </div>
            <!--manual navigation end-->
        </div>
        <!--image slider end-->

        <script type="text/javascript">
            var counter = 1;
            setInterval(function(){
                document.getElementById('radio' + counter).checked = true;
                counter++;
                if(counter > 4){
                    counter - 1;
                }
            }, 5000);
        </script>

这是CSS：

`/**For slider images**/
.slider {
    width: 800px;
    height: 500px;
    overflow:  hidden;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    left: 50%;
    width: 800px;
    height: 500px;
}

/**for manual slide nav**/
.nav-manual {
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;

}

.manual-btn {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #add8e7;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -20%;
}

#radio3:checked ~ .first {
    margin-left: -40%;
}

#radio4:checked ~ .first {
    margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;

}

.nav-auto div {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.nav-auto div:not(:last-child) {
    margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
    background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
    background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
    background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
    background: #add8e7;
}`
css

2条答案

按热度按时间
lrl1mhuk

lrl1mhuk1#

  • 您只需要添加边距：0自动;到滑块类
  • 取滑块的父div并给予高度：100 vh;显示：flex;对齐项目：center;使滑块和单选按钮居中。

我也附上下面的代码。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider-wrapper{
  height: 100vh;
  display: flex;
  align-items: center;
}

/**For slider images**/
.slider {
  width: 800px;
  height: 500px;
  overflow:  hidden;
  margin: 0 auto;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  left: 50%;
  width: 800px;
  height: 500px;
}

/**for manual slide nav**/
.nav-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;

}

.manual-btn {
  border: 2px solid #add8e7;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #add8e7;
}

#radio1:checked ~ .first {
  margin-left: 0;
}

#radio2:checked ~ .first {
  margin-left: -20%;
}

#radio3:checked ~ .first {
  margin-left: -40%;
}

#radio4:checked ~ .first {
  margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;

}

.nav-auto div {
  border: 2px solid #add8e7;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.nav-auto div:not(:last-child) {
  margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
  background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
  background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
  background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
  background: #add8e7;
}
<div class="slider-wrapper">
    <!--image slider start-->
    <div class="slider">
        <div class="slides">
            <!--radio buttons start-->
            <input type="radio" name="radio-btn" id="radio1">
            <input type="radio" name="radio-btn" id="radio2">
            <input type="radio" name="radio-btn" id="radio3">
            <input type="radio" name="radio-btn" id="radio4">
            <!--radio buttons end-->
            <!--slide images start-->
            <div class="slide first">
                <img src="images/slider-1.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-2.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-3.jpg" alt="">
            </div>
            <div class="slide">
                <img src="images/slider-4.jpg" alt="">
            </div>
            <!--slide images end-->    
            <!--automatic navigation start-->
            <div class="nav-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
                <div class="auto-btn4"></div>
            </div>
            <!--automatic navigation end-->                          
        </div>
        <!--manual navigation start-->
        <div class="nav-manual">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
        </div>
        <!--manual navigation end-->
    </div>
    <!--image slider end-->
</div>

    <script type="text/javascript">
        var counter = 1;
        setInterval(function(){
            document.getElementById('radio' + counter).checked = true;
            counter++;
            if(counter > 4){
                counter - 1;
            }
        }, 5000);
    </script>
赞(0）分享  回复(0）举报  2023-03-20
rggaifut

rggaifut2#

您已将overflow:hidden属性应用于.slider类。因此，每当您将display:flex;属性应用于.slider类时，所有内容都会以该类为中心，并且由于overflow:hidden属性，内容会消失。请将display:flex; justify-content:center; align-items:center;应用于.slider类，而不是将.slider类放入另一个类中，然后将display:flex; justify-content:center; align-items:center;属性应用于该类。谢谢你。

var counter = 1;
            setInterval(function(){
                document.getElementById('radio' + counter).checked = true;
                counter++;
                if(counter > 4){
                    counter - 1;
                }
            }, 5000);
main{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.slider {
    width: 800px;
    height: 500px;
    overflow:  hidden;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    left: 50%;
    width: 800px;
    height: 500px;
}

/**for manual slide nav**/
.nav-manual {
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;

}

.manual-btn {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #add8e7;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -20%;
}

#radio3:checked ~ .first {
    margin-left: -40%;
}

#radio4:checked ~ .first {
    margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;

}

.nav-auto div {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.nav-auto div:not(:last-child) {
    margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
    background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
    background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
    background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
    background: #add8e7;
}
<main>
<div class="slider">
            <div class="slides">
                <!--radio buttons start-->
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
                <!--radio buttons end-->
                <!--slide images start-->
                <div class="slide first">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwRZL9s9_-gtHfUexM5Uc2W4W2SLINf4VNGUWBPFLDuw&s" alt="">
                </div>
                <div class="slide">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8qotyu4Wk9mK7PrwarfZgapdOaZcYpUOfZCcVXPDhNA&s" alt="">
                </div>
                <div class="slide">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUWijmNaIAo0q5TwKQz_l614_efeyNa6F_5l7VIUb-Xg&s" alt="">
                </div>
                <div class="slide">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRELm9fhk6eOno_A2-5sNM9dsQBw69zifHyhcgQ3P1HtQ&s" alt="">
                </div>
                <!--slide images end-->    
                <!--automatic navigation start-->
                <div class="nav-auto">
                    <div class="auto-btn1"></div>
                    <div class="auto-btn2"></div>
                    <div class="auto-btn3"></div>
                    <div class="auto-btn4"></div>
                </div>
                <!--automatic navigation end-->                          
            </div>
            <!--manual navigation start-->
            <div class="nav-manual">
                <label for="radio1" class="manual-btn"></label>
                <label for="radio2" class="manual-btn"></label>
                <label for="radio3" class="manual-btn"></label>
                <label for="radio4" class="manual-btn"></label>
            </div>
            <!--manual navigation end-->
        </div>
</main>
赞(0）分享  回复(0）举报  2023-03-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com