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

Question

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

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

我之所以没有在这里包含代码，是因为我无法弄清楚哪个div 与这个问题相关，而且其中很多都使用了引导程序，这会占用大量空间来包含所有内容。

Answer 1

您的容器：.owl-wrapper的宽度为 1232px，而它的父级似乎明显更小并设置为 overflow: hidden 。将.owl-wrapper更改为width: 100%。然后从.owl-item中删除float: left并改为添加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/[e-mail]" data-lightbox-     
gallery="gallery1" data-lightbox-hidpi="images/[e-mail]">
                    <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/[e-mail]" data-lightbox-  
gallery="gallery1" data-lightbox-hidpi="images/[e-mail]">
                    <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/[e-mail]" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/[e-mail]">
                    <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/[e-mail]" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/[e-mail]">
                    <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和CSS。

我会将猫头鹰包装器div 的宽度设置为 750px（这应该足够大以包含 4 个猫头鹰物品div 设置为当前宽度 182px）。然后将显示更改为内联块，将位置更改为相对，并使用边距居中，如下所示：

<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 前缀的动画代码。

我希望这对你有用！:)