Question

我目前正在尝试在我的旋转木马旁边创建侧栏。但由于某种原因，我无法将旋转木马放在页面的中心，而旁边则是旁边的。我尝试使用保证金：auto auto但没有运气。我也尝试过使用Justify-content：center。任何人都知道它为什么不动？

HTML：

<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
            <li data-target="#carouselSlides" data-slide-to="1"></li>
        </ol>

        <!--The slideshow-->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
            </div>
            <!--<div class="carousel-item">
                <img src="" alt>
            </div>-->

            <!--Left and right controls-->
            <a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#carouselSlides" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </section>


    <aside class="rightSideSection container clearfix">
        <header style="background: #2A2A36;"><h1 class="bold">Whats popular</h1></header><br>
        <ul class="popularList">
            <li>example1</li>
            <li>example2</li>
            <li>example3</li>
        </ul>
    </aside>

CSS：

    #carouselSlides{
    display: inline-block;
    width: 700px;
    justify-content: center;
}
.carousel-inner img{

}

/*right side bar*/
.rightSideSection{
    background: #ffffff;
    width: 280px;
    float: right;
    margin-top: 40px;
}
.rightSideSection h1{
    font-size: 30px;
}
.popularList li{
    margin-left: 20px;
}

Answer 1

也许这对您有用，可以将轮播与中心对齐：

<div style="text-align: center; text-align: -webkit-center;">
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<div>

这里基本上“carouselSlides”包含在div中提供div样式：

div{
text-align: center;
text-align: -webkit-center;
}

无法将转盘放在旁边

1 个答案: