Question

我想在页面的中心居中4个盒子，即它们应该垂直居中并且水平放置，一个盒子应该在极左侧，一个盒子在极右侧，左侧盒子应该水平放置在极端的盒子之间。我知道之前已经提出过这样的问题，但我没有得到解决方案的确切逻辑。有人可以给出相同的解释吗？非常感谢。这是HTML代码 -

＆＃13;

.cards div{
    height: 200px;
    width: 200px;
    float: left;
    text-align: center;
    margin-left: 100px;
}
.card_1{
    background-color: green;
}
.card_2{
    background-color: blue;
}
.card_3{
    background-color: yellow;
}
.card_4{
    background-color: red;
}

＆＃13;

<html>
    <head>
        <link rel="stylesheet" href="second.css">
    </head>
    <body>
        <div class="cards">
            <div class="card_1">
            </div>
            <div class="card_2">
            </div>
            <div class="card_3">
            </div>
            <div class="card_4">
            </div>
        </div>
    </body>
</html>

＆＃13;

Answer 1

以下是使用flexbox的解决方案：

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
.cards {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cards div {
    height: 200px;
    width: 200px;
}
.card_1 {
    background-color: green;
}
.card_2 {
    background-color: blue;
}
.card_3 {
    background-color: yellow;
}
.card_4 {
    background-color: red;
}

有关flexbox的更多信息：

修改

此解决方案的秘诀是

align-items: center; display: flex; flex-direction: row; justify-content: space-between;

display: flex;指示浏览器在渲染容器元素时使用flexbox布局。 flex-direction: row;连续呈现容器的所有子项。 align-items: center;垂直居中容器的孩子。最后justify-content: space-between;将容器的每个子节点隔开，每个子节点之间的空间相等。

Flexbox是一个功能强大的布局系统。我建议通过SO或提供的链接了解更多信息。

请记住，所有主流浏览器都支持flexbox，但由于存在多个错误，IE 11的支持有限。

如何在HTML的中心将多个图像居中？

1 个答案: