包含圖庫的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/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和CSS。

我將您的owl-wrapper div的寬度設置為750px（這應該足夠大，以包含設置為當前寬度182px的4個owl-item div）。 然后將顯示更改為inline-block，將位置更改為相對，並使用邊距使居中，如下所示：

<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前綴的動畫代碼。

希望對您有用！ :)