jquery - 无法在 Bootstrap 容器中居中 jssor slider

Question

将 bootstrap 与 jssor 结合使用我一直无法弄清楚如何使我的 slider 图像居中。我试图将下面代码中的边距归零，但 slider 中的图像位于容器的左侧。我怎样才能使图像在 Bootstrap 容器内居中？

<!-- topconent -->
<div class="container topcontent">

    <div class="row">
            <div class="col-lg-12 text-center">
                    <h1>This is my header</h1>

    <div id="slider1_container" 
    style="position: relative; margin: 0px auto;">
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; overflow: hidden;
        margin 0px auto; width: 630px; height: 420px;">
            <div><img u="image" src="img/mainslider/img1.jpg" /></div>
            <div><img u="image" src="img/mainslider/img2.jpg" /></div>
        </div>
    </div>

                    <p class="lead">More info</p>
            </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.topcontent -->

Answer 1

好的，明白了。这个问题真的是我缺乏经验\不经常使用 css 比什么都重要。

为了使 slider 居中，我只使用了 Bootstrap 容器:

<!-- topconent -->
<div class="container topcontent">

    <div class="row">
        <div class="col-lg-12 text-center">
            <h1>This is my header</h1>

            <!-- centered container -->
            <div class="col-lg-8 col-lg-offset-2 text-center">

                <div id="slider1_container" style="position: relative; 
                top: 0px; left: 0px; width: 600px; height: 300px;">
                    <!-- Slides Container -->
                    <div u="slides" style="cursor: move; position: absolute;
                    overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
                        <div><img u="image" src="img/mainslider/img1.jpg" /></div>
                        <div><img u="image" src="img/mainslider/img2.jpg" /></div>
                    </div>
                </div>

                <p class="lead">More info</p>

            </div>
            <!-- /.centered container -->

        </div>
        <!-- /.container -->

    </div>
    <!-- /.row -->

</div>
<!-- /.topcontent -->

现在我的困惑是我认为它没有居中，因为图像没有延伸到整个容器，所以它被拉到了左边。我用了script on the jssor site使图像缩放，现在看起来不错。我以前看过脚本，但没有使用它，因为我想“居中”图像而不是“使其响应”并且没有意识到这就是使其响应的目的!德普。它还保持纵横比。