Question

我正在尝试将我的旋转木马与中心对齐，但它不起作用，如image所示。

以下是HTML代码：

    <div class="c-wrapper" position="absolute" align="center">
        <div class="col-sm-6 col-md-6" position="absolute" align="center">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" margin: auto; width: 500px; position="absolute" align="center">

                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0"
                        class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/temple.jpg" alt="temple" class="img-responsive";>
                    </div>
                    <div class="item">
                        <img src="img/harmonium.jpg" alt="harmonium"
                            class="img-responsive";>
                    </div>
                    <div class="item">
                        <img src="img/tabla.jpg" alt="tabla" class="img-responsive">
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic"
                    role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="#carousel-example-generic"
                    role="button" data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>

Answer 1

您只添加了一个div标记 - col-sm-6 col-md-6。所以，它只占据页面的前六个单元格。 Bootstrap将页面划分为12个单元格。因此，请使用3个div标记，首先清空div，其值为col-sm-3 col-md-3，然后是您已有的第二个div，并添加另一个空值div，其值为{ {1}}。

col-sm-3 col-md-3

Answer 2

以下是轮播

的完整功能代码

<div class="col-md-12 col-lg-12">
    <div class="col-md-6 col-lg-6" style="margin-left: 25%;">
        <div id="carousel-example-generic" class="carousel slide"
            data-ride="carousel" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0"
                    class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/temple.jpg" alt="temple" class="img-responsive";>
                </div>
                <div class="item">
                    <img src="img/harmonium.jpg" alt="harmonium" class="img-responsive";>
                </div>
                <div class="item">
                    <img src="img/tabla.jpg" alt="tabla" class="img-responsive">
                </div>
            </div>
            <a class="left carousel-control"
                data-target="#carousel-example-generic" role="button"
                data-slide="prev"> <span
                class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a> <a class="right carousel-control"
                data-target="#carousel-example-generic" role="button"
                data-slide="next"> <span
                class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            <h4>
        <p class="text-center">     <figcaption>culpa qui officia deserunt mollitia</figcaption> </p>
            </h4>
        </div>
    </div>
</div>

如何将中心对齐到旋转木马？

2 个答案: