你如何让 3 个 div 连续居中？

Question

我无法让 3 个 div 居中。它们看起来几乎居中，但右侧的白色 space 仍然比左侧多。我将我的 html 和 css 连同 link 添加到网站。

http://alexrdzv2.herokuapp.com/index.html

此外，当我将 window 变大时，情况会变得更糟。

我应该提一下，包裹它的容器只有以下属性 - 宽度：80%、边距：自动和溢出：隐藏。我将页面中的所有部分都包裹在这个容器中，但我知道这不是问题，因为我已经尝试在没有它的情况下进行操作，但框仍然无法正确居中。

#boxes {
    min-height: 200px;
    margin-top: 20px;
}

#boxes .box {
    margin-top: 20px;
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
  }

#boxes .fab {
    padding: 0 5px;
}

<section id="boxes">
    <div class="container">
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>

Answer 1

您可以使用 flexbox CSS3 功能将您的框居中，为此您需要在 container class 下方添加 CSS。

.container {
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    justify-content: center;
}

#boxes {
    min-height: 200px;
    margin-top: 20px;
}

#boxes .box {
    margin-top: 20px;
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
  }

#boxes .fab {
    padding: 0 5px;
}

<section id="boxes">
    <div class="container">
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>

Answer 2

如果您愿意使用该库，使用 Bootstrap 可以非常轻松地完成此操作。您只需将行 class 添加到容器 div，然后将 col-md-3 添加到每个 div 元素。 bootstrap 中的行宽度为 12 'units'，因此 col-md-3 是具有三分之一可用宽度的列。

<section id="boxes">
    <div class="container row">
        <div class="box col-md-3">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box col-md-3">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box col-md-3">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>

可在此处找到 bootstrap 中有关此主题的更多文档：https://getbootstrap.com/docs/4.1/layout/grid/

可在此处找到 bootstrap 的可下载文件：https://getbootstrap.com/docs/4.1/getting-started/download/

虽然 Bootstrap 不是唯一的解决方案，但它是我更愿意使用的解决方案。

你如何让 3 个 div 连续居中？

How do you center 3 divs in a row?

html

css

centering