在 CSS 中居中容器，删除第 4 个框后

Question

我已经删除了第 4 个盒子，因为我只需要 3 个并且想要 3 个盒子居中。 Here is an image。这是我的 CSS 代码。下面是 HTML 代码，一直说代码太多，所以我用更多的文本来填充这部分，希望我能在某个时候得到一些帮助，希望现在有足够的文本来编码？

#featured-wrapper {
  overflow: hidden;
  padding: 5em 0em;
  background: #FFF;
}

#featured h2 {
  text-align: center;
}

#featured .icon {
  position: relative;
  display: block;
  background: #2A70E8;
  margin: 0px auto 20px auto;
  line-height: 2.5em;
  font-size: 4em;
  text-align: center;
  color: #FFF;
}

.column1,
.column2,
.column3,
.column4 {
  width: 282px;
}

.column1,
.column2 {
  float: left;
  margin-right: 24px;
}

.column3 {
  float: left;
}

.column4 {
  float: right;
}

<div id="featured-wrapper">
  <div id="featured" class="container">
    <div class="major">
      <h2>Maecenas lectus sapien</h2>
      <span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
    </div>
    <div class="column1">
      <span class="icon icon-bar-chart"></span>
      <div class="title">
        <h2>Maecenas lectus sapien</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column2">
      <span class="icon icon-qrcode"></span>
      <div class="title">
        <h2>Praesent scelerisque</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column3">
      <span class="icon icon-building"></span>
      <div class="title">
        <h2>Fusce ultrices fringilla</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>

  </div>
</div>

Answer 1

我们需要查看您的 HTML 以便为您提供正确答案 但试试这个 替换此代码

#featured-wrapper {
    overflow: hidden;
    padding: 5em 0em;
    background: #FFF;
}

有了这个

#featured-wrapper {
    width:900px;
    margin:0 auto;
    overflow: hidden;
    padding: 5em 0em;
    background: #FFF;
}

你可以把这个数字改成 900 具有 HTML 的最佳宽度

Answer 2

尝试使用 columnwrap 类将 3 列包装在一个 div 中，例如：

.columnwrap {
width: 846px; //width of your 3 columns combined, add px for padding if needed
margin: auto;
}

然后：

<div class="columnwrap">
<div class="column1"></div>
<div class="column1"></div>
<div class="column1"></div>
</div>

您将需要在 columnwrap 上的结束 div 标记之前清除三个浮点数。这应该可以解决问题。

Answer 3

您可以避免使用float 并使用.column {display:inline-block} + .parent .column {text-align:center}。

下面要测试的片段

#featured-wrapper {
  overflow: hidden;
  padding: 5em 0em;
  background: #FFF;
  text-align:center;/* new */
}

#featured h2 {/* cleaned up */
}

#featured .icon {
  position: relative;
  display: block;
  background: #2A70E8;
  margin: 0px auto 20px auto;
  line-height: 2.5em;
  font-size: 4em;
  text-align: center;
  color: #FFF;
}

.column1,
.column2,
.column3,
.column4 {
  width: 282px;
  display:inline-block;/* new instead float*/
  margin:0  10px;/* update*/
}

.column1,
.column2 {/* cleaned up */
}

.column3 {/* cleaned up */
}

.column4 {/* cleaned up */
}

<div id="featured-wrapper">
  <div id="featured" class="container">
    <div class="major">
      <h2>Maecenas lectus sapien</h2>
      <span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
    </div>
    <div class="column1">
      <span class="icon icon-bar-chart"></span>
      <div class="title">
        <h2>Maecenas lectus sapien</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column2">
      <span class="icon icon-qrcode"></span>
      <div class="title">
        <h2>Praesent scelerisque</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>
    <div class="column3">
      <span class="icon icon-building"></span>
      <div class="title">
        <h2>Fusce ultrices fringilla</h2>
        <span class="byline">Integer sit amet aliquet pretium</span>
      </div>
    </div>

  </div>
</div>