html - 在 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 的宽度