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

我正在尝试将旋转木马与中心对齐，但它无法正常工作，如图所示

下面是它的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>

您只添加了一个带有-

col-sm-6 col-md-6

的

div

标记。因此，它只占据页面的前六个单元格。引导将页面分成12个单元格。因此，使用3个

div

标记，第一个空

div

，值为

col-sm-3 col-md-3

，然后是第二个

div

，并添加另一个空

div

，值为

col-sm-3 col-md-3

<div class="col-sm-6 col-md-6">
      |
      |
</div>

|
|

这是旋转木马的完整功能代码

<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>

以前的
下一个
罪魁祸首