Question

使用jssor的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。

为了使滑块居中，我只使用了引导容器：

<!-- 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来制作图像比例，现在它看起来不错。我之前看过剧本，但没有使用它，因为我想＆＃34;居中＆＃34;图像不是＆＃34;使其响应＆＃34;并没有意识到这是使其响应的目的！ DERP。它也保持纵横比。

Answer 2

<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 style="text-align:center;background-color:#1c2331;padding:10px">
                 <img u="image" src="img/mainslider/img1.jpg" />
            </div>
            <div style="text-align:center;background-color:#1c2331;padding:10px">
                 <img u="image" src="img/mainslider/img2.jpg" />
            </div>
        </div>
    </div>
                    <p class="lead">More info</p>
            </div>
    </div>
    <!-- /.row -->

</div>

无法在引导容器中居中jssor滑块

2 个答案: