无法在此网站上居中显示多个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标记

回答

相关问题