無法在此網站上居中顯示多個Div標記

-1

我一直在嘗試兩天才能將這些div項目水平居中。我有多個徽標需要分兩行。他們似乎不想居中，但想要向左漂移。我無法弄清楚是什麼讓它這樣做。無法在此網站上居中顯示多個Div標記

.partners_section_container { 
 
    display: table; 
 
    height: 65px; 
 
    text-align: center; 
 
} 
 

 
.x-content-band { 
 
    margin: 0 0 0.15em; 
 
    padding: 40px 0; 
 
} 
 

 
.x-container.max.width.wpb_row { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.partner_logos { 
 
    margin-bottom: 40px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.partner_logo1 { 
 
    padding: 15px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 14%; 
 
}

<div id="x-content-band-4" class="x-content-band vc partners_section_container" style="background-color: transparent; padding-top: 0px; padding-bottom: 0px;"> 
 
    <div class="x-container max width wpb_row"> 
 
    <div class="x-column x-sm vc partner_logos x-1-1" style=""> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-62" src="http://leadershipwv.org/wp-content/uploads/2017/02/Argos.jpg" alt="argos logo" width="206" height="86" data-pin-nopin="true"></div> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-57" src="http://leadershipwv.org/wp-content/uploads/2016/03/BBT.png" alt="BB&amp;T logo" width="150" height="60" data-pin-nopin="true"></div> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-58" src="http://leadershipwv.org/wp-content/uploads/2016/03/brickstreet.png" alt="brickstreet logo" width="198" height="84" data-pin-nopin="true"></div> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-59" src="http://leadershipwv.org/wp-content/uploads/2016/03/dominion.png" alt="dominion logo" width="198" height="94"></div> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-62" src="http://leadershipwv.org/wp-content/uploads/2017/02/DOWdiamond.gif" alt="dow logo" width="206" height="86"></div> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-62" src="http://leadershipwv.org/wp-content/uploads/2017/02/EQT.jpg" alt="eqt logo" width="206" height="86"></div> 
 
     <div class="partner_logo1"><img class="alignnone size-full wp-image-62" src="http://leadershipwv.org/wp-content/uploads/2016/03/firstenergy.png" alt="first energy logo" width="206" height="86"></div> 
 
    </div> 
 
    </div> 
 
</div>

如果你想看到直播現場，please view it here.

來源

2017-03-07 Tyrii

謝謝#jack，我不知道如何設置該片段的東西！ – Tyrii

什麼不關注它？我看到一堆標誌間隔均勻水平。 – Slime

我發現它是什麼。這是WordPress的主題！我添加了這個，它似乎工作正常。 – Tyrii

我不知道爲什麼你使用的表單元格在2017年，我會建議你使用Flexbox的，它會幫助你很多。

如果你想在一個容器居中東西，我會很容易地做到這一點是這樣的：

.container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; } 

    .logos { 
    padding: 40px 0; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; } 

    .logo { 
    box-sizing: border-box; 
    padding: 15px; 
    width: 14%; 
    display: flex; 
    justify-content: center; 
    align-items: center; }

在標誌使用柔性包裝類導致，當含量達到最大寬度，它會自動向突破下一列使用相同的規則和比例。

我在logo中使用了box-sizing屬性來確保內容不會超過14％的寬度，如果是這樣會在某些情況下導致奇怪的顯示。

來源

2017-03-07 20:54:18

看起來我需要刷上我的CSS吧？感謝提示維克多！ – Tyrii

所以有很明顯是一件時髦與wordpress主題本身。我找到它並添加了這段代碼，它解決了這個問題。

.x-container.max.width.wpb_row { max-width: 1600px!important;}

來源

2017-03-07 20:52:59 Tyrii

無法在此網站上居中顯示多個Div標記

回答

相關問題