如何在HTML页面的中心居中放置多个图像？

Question

我想在页面的中心居中放置4个框，即它们应该垂直居中并水平放置，一个框应该位于最左端，一个框应该位于最右端，而左侧的框应该水平放置在两个极端之间。 我知道以前曾问过这样的问题，但是我没有得到解决方案的确切逻辑。 有人可以给一个适当的解释吗？ 非常感谢。 这是HTML代码-

 .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; }

 <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>

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 个解决方案

解决方案1
2 2017-08-11 17:41:03

如何在HTML页面的中心居中放置多个图像？

问题描述

1 个解决方案

解决方案1 2 2017-08-11 17:41:03

解决方案1
2 2017-08-11 17:41:03