Question

如果您转到以下页面：play.yoozon.com

并在标题为＆＃34;屏幕截图＆＃34;的部分中对图库执行检查元素，您应该看到我使用过的宽度和边距。出于某种原因，屏幕截图组似乎向左移动，我似乎无法使用填充来居中它们，这为整个页面增加了额外的空间，并且在移动设备上看起来很糟糕。

我之所以没有包含代码的原因是因为我无法弄清楚哪个div是这个问题的相关部分，而且很多都使用了bootstrap，这会占用一个这里的空间很大，包括一切。

Answer 1

您的容器：.owl-wrapper的宽度为1232px，而其父级似乎要小得多，并设置为overflow: hidden。将.owl-wrapper更改为width: 100%。然后从float: left移除.owl-item并添加display: inline-block。应该这样做。

Answer 2

用此替换你的列..

<div class="col-sm-12 col-md-12 col-lg-12" style="width: 100%;">
<div id="owl-gallery" class="owl-carousel owl-theme" style="opacity: 1; display: block;">

    <div class="owl-wrapper-outer">
        <div class="owl-wrapper" style="width: 100%; left: 0px; display: block;">
            <div class="owl-item" style="width: 154px;">
                <div class="item"><a href="images/screenshot1@2x.png" data-lightbox-     
gallery="gallery1" data-lightbox-hidpi="images/screenshot1@2x.png">
                    <img src="images/screenshot1.png" class="img-responsive img-rounded"      
alt="img"></a></div>
            </div>
            <div class="owl-item" style="width: 154px;">
                <div class="item"><a href="images/screenshot3@2x.jpg" data-lightbox-  
gallery="gallery1" data-lightbox-hidpi="images/screenshot3@2x.jpg">
                    <img src="images/screenshot3.jpg" class="img-responsive img-rounded"  
alt="img"></a></div>
            </div>
            <div class="owl-item" style="width: 154px;">
                <div class="item"><a href="images/screenshot2@2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot2@2x.png">
                    <img src="images/screenshot2.png" class="img-responsive img-rounded"   


alt="img"></a></div>
            </div>
            <div class="owl-item" style="width: 154px;">
                <div class="item"><a href="images/screenshot4@2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot4@2x.jpg">
                    <img src="images/screenshot4.JPG" class="img-responsive img-rounded" 
alt="img"></a></div>
            </div>
        </div>
    </div>

    <div class="owl-controls clickable" style="display: none;">
        <div class="owl-pagination">
            <div class="owl-page"><span class=""></span></div>
        </div>
    </div>
</div>

</div>

Answer 3

我没有使用过Bootstrap，但我知道HTML＆amp; CSS。

我会将你的owl-wrapper div的宽度设置为750px（这应该足够大，以包含设置为当前宽度182px的4个owl-item div）。然后将显示更改为内联块，将位置更改为相对，并将边距更改为居中，如下所示：

<div class="owl-wrapper" style="width: 750px; position: relative; margin: 0 auto; display: inline-block; -webkit-transition: all 0ms ease; transition: all 0ms ease;">

此外，如果您希望向后兼容旧版本的firefox，您可能仍希望包含带-moz前缀的动画代码。

我希望对你有用！：）

包含图库的Div不会水平居中对齐

3 个答案: