无法在此网站上将多个 Div 标签居中

Question

我已经尝试了两天让这些 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.

Answer 1

所以 wordpress 主题本身显然有些古怪。我找到它并添加了这段代码，它解决了这个问题。

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

Answer 2

我不知道你为什么在2017年使用table-cell，我会推荐你使用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; }

在徽标中使用 flex-wrap class 会导致当内容达到最大宽度时，它会使用相同的规则和比例自动换行到下一列。

我在logo中使用了box-sizing 属性来保证内容不会超过14%的宽度，如果这样的话在某些情况下会导致奇怪的显示。

无法在此网站上将多个 Div 标签居中

Not able to center multple Div tags on this website

html

css

centering