如何将3个div连续居中?

时间:2019-04-19 20:51:54

标签: html css centering

我无法让3个div居中。它们似乎几乎居中,但右侧的空白空间仍然大于左侧的空白空间。我包括了我的html和CSS以及指向该站点的链接。

doc

此外,当我将窗口放大时,它甚至变得更糟。

我应该提到包装的容器仅具有以下属性-宽度: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>

2 个答案:

答案 0 :(得分:3)

您可以使用flexbox CSS3功能将框居中,为此,您需要在container类中的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>

答案 1 :(得分:0)

如果您愿意使用该库,则可以使用Bootstrap轻松完成。您可以简单地将行类添加到容器div中,然后将col-md-3添加到每个div元素中。引导程序中的行的宽度为12个“单位”,因此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>

有关引导程序中该主题的更多文档,可以在这里找到:https://getbootstrap.com/docs/4.1/layout/grid/

可下载的引导文件可在以下位置找到:https://getbootstrap.com/docs/4.1/getting-started/download/

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