Question

我需要水平居中对齐下图中显示的所有内容。

我还需要使所有表格单元格具有相同的宽度，因为它们似乎是根据字体真棒图标大小自动调整。

我该怎么做？

我的HTML

<section id="Four" class="wrapper style3">
                    <div class="inner">
                        <div class="container">
                            <div class="row">
                                    <div class="two columns">
                                    <i class="fa fa-truck fa-5x"></i>
                                    <h3>A Fleet of</h3>
                                    <div class="counter col_fourth">
                                    <h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
                                    </div>
                                    <p class="text-box">TRUCKS</p>
                                </div>
                                    <div class="two columns">
                                    <i class="fa fa-users fa-5x"></i>
                                    <h3>Involving</h3>
                                    <div class="counter col_fourth">
                                    <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
                                    </div>
                                    <p class="text-box">EMPLOYEES</p>
                                </div>
                                    <div class="two columns">
                                    <i class="fa fa-cubes fa-5x"></i>
                                    <h3>Loading</h3>
                                    <div class="counter col_fourth">
                                    <h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
                                    </div>
                                    <p class="text-box">FTL LOADS IN 2016</p>
                                </div>
                                    <div class="two columns">
                                    <i class="fa fa-leaf fa-5x"></i>
                                    <h3>Emissions</h3>
                                    <div class="counter col_fourth">
                                    <h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
                                    </div>
                                    <p class="text-box">100% EURO 6</p>
                                </div>
                                    <div class="two columns">
                                    <i class="fa fa-compress fa-5x"></i>
                                    <h3>Trailers</h3>
                                    <div class="counter col_fourth">
                                    <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
                                    </div>
                                    <p class="text-box">TRAILERS</p>
                                </div>
                                    <div class="two columns">
                                    <i class="fa fa-calendar fa-5x"></i>
                                    <h3>Since</h3>
                                    <div class="counter col_fourth">
                                    <h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
                                    </div>
                                    <p class="text-box">25 YEARS OF SERVICE</p>
                                </div>
                        </section>
                    </div>
                </div>
            </section>

Answer 1

你应该使用保证金：auto;为你的内部或容器类

.inner {
     ...
     margin: auto;
     ....

}

Answer 2

您可以将flexbox与flex-grow和flex-basis一起使用，使列宽度相等，并填充该行。

＆＃13;

.row {
  display: flex;
}
.row .columns {
  flex-grow: 1;
  flex-basis: 0;
  margin: 0 1em;
  background: #eee;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="Four" class="wrapper style3">
  <div class="inner">
    <div class="container">
      <div class="row">
        <div class="two columns">
          <i class="fa fa-truck fa-5x"></i>
          <h3>A Fleet of</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
          </div>
          <p class="text-box">TRUCKS</p>
        </div>
        <div class="two columns">
          <i class="fa fa-users fa-5x"></i>
          <h3>Involving</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
          </div>
          <p class="text-box">EMPLOYEES</p>
        </div>
        <div class="two columns">
          <i class="fa fa-cubes fa-5x"></i>
          <h3>Loading</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
          </div>
          <p class="text-box">FTL LOADS IN 2016</p>
        </div>
        <div class="two columns">
          <i class="fa fa-leaf fa-5x"></i>
          <h3>Emissions</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
          </div>
          <p class="text-box">100% EURO 6</p>
        </div>
        <div class="two columns">
          <i class="fa fa-compress fa-5x"></i>
          <h3>Trailers</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
          </div>
          <p class="text-box">TRAILERS</p>
        </div>
        <div class="two columns">
          <i class="fa fa-calendar fa-5x"></i>
          <h3>Since</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
          </div>
          <p class="text-box">25 YEARS OF SERVICE</p>
        </div>
</section>
</div>
</div>
</section>

＆＃13;

或者您可以为列指定特定宽度，并使用justify-content将其置于中心

＆＃13;

.row {
  display: flex;
  justify-content: center;
}
.row .columns {
  width: 150px;
  margin: 0 1em;
  background: #eee;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="Four" class="wrapper style3">
  <div class="inner">
    <div class="container">
      <div class="row">
        <div class="two columns">
          <i class="fa fa-truck fa-5x"></i>
          <h3>A Fleet of</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="120" data-speed="2000"></h2>
          </div>
          <p class="text-box">TRUCKS</p>
        </div>
        <div class="two columns">
          <i class="fa fa-users fa-5x"></i>
          <h3>Involving</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
          </div>
          <p class="text-box">EMPLOYEES</p>
        </div>
        <div class="two columns">
          <i class="fa fa-cubes fa-5x"></i>
          <h3>Loading</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="6686" data-speed="2000"></h2>
          </div>
          <p class="text-box">FTL LOADS IN 2016</p>
        </div>
        <div class="two columns">
          <i class="fa fa-leaf fa-5x"></i>
          <h3>Emissions</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="100" data-speed="2000"></h2>
          </div>
          <p class="text-box">100% EURO 6</p>
        </div>
        <div class="two columns">
          <i class="fa fa-compress fa-5x"></i>
          <h3>Trailers</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="160" data-speed="2000"></h2>
          </div>
          <p class="text-box">TRAILERS</p>
        </div>
        <div class="two columns">
          <i class="fa fa-calendar fa-5x"></i>
          <h3>Since</h3>
          <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="1991" data-speed="2000"></h2>
          </div>
          <p class="text-box">25 YEARS OF SERVICE</p>
        </div>
</section>
</div>
</div>
</section>

＆＃13;

Answer 3

我还建议使用display:flex;。

这是一个例子https://jsfiddle.net/znggcgaq/

.row{
  display: flex;
  flex-wrap: wrap;
}

.row .columns {
  margin: 5px;
  flex-grow: 1;
}

这是一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在我的例子中，我允许项目包装在容器div中。

Answer 4

根据我在此处提出的另一个问题，我找到了问题最后步骤的解决方案：CSS3 priority order for browsers

我已经使用了上面发布的提示，如下所示：

#statistics .row {
            display: flex;
            justify-content: center;
    }

    #statistics .row .columns {
            width: 150px;
            margin: 0 1em;
            background: #fff;
    }

但在此之后，Dreamweaver上的所有内容都很好看，但浏览器却没有。问题是CSS指令顺序，因为它们不是＆＃34; grid＆＃34;中的最后一个。 CSS部分。我把它们放在CSS部分的最后一部分，它的最终中心就像我想要的那样

如何在容器内对齐并获得均匀的宽度

4 个答案: