将嵌套的可调整大小的div居中到正文页

Question

CSS和HTML的新手，我正在尝试构建一个简单的网站，它可以显示5个相邻的图像，并在调整窗口大小时重新缩放。到目前为止，我所做的工作很好，但包含5个图像的div并没有位于页面主体的中心，我无法在不破坏其他属性(如调整大小或图像垂直相邻(的情况下找到方法。

非常感谢您的帮助！

.imgContainer {
float: left;
position: relative;
margin: 0 auto;
width: 17%;
}
img {
max-height: 90%;
max-width: 90%;
}
body {
width: 100%;
margin-left: auto;
margin-right: auto;
}
html {
text-align: center;
}
.new_line {
clear: both;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 75%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
margin-bottom: 10px;
}
.collapsible:after {
content: '2795';  /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "2796";  /* Unicode character for "minus" sign (-) */
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
overflow: hidden;
}

<div class="content">
<h4>Heading</h4>
<div class="imagetuple">
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG1</center>
</p>
</div>

<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG2</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG3</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG4</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG5</center>
</p>
</div>
</div>
</div>

Answer 1

将浮动更改为inline-block。在现代网络中，浮动只有一个有效的目的，那就是让文本包裹在图像或其他媒体容器中。不要将它们用于结构布局。

不赞成使用中心标记。。不要用它。无论如何，你不需要在那里居中。

有关其他提示，请参阅我的CSS注释。在结束项目之前，请在浏览器中测试每一条规则，尽可能少地使用。

.imgContainer {
display: inline-block;
/* position: relative; not needed */
width: 17%;
}
img {
max-height: 90%;
max-width: 90%;
}
body {
/* width: 100%; not needed */
/* margin-left: auto; not needed */
/* margin-right: auto; not needed */
}
html {
/* text-align: center; not needed */
}
.new_line {
clear: both;
}
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 75%;
border: none;
text-align: left;
outline: none; /* be sure you understand the accessibility implications of this */
font-size: 15px;
margin-bottom: 10px;
}
.content {
padding: 0 18px;
overflow: hidden;
text-align: center; /* better here than the entire HTML document */
}

<div class="content">
<h4>Heading</h4>
<div class="imagetuple">
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>IMG1</p>
</div>

<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>IMG2</p>
</div>

<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>IMG3</p>
</div>

<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>IMG4</p>
</div>

<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>IMG5</p>
</div>
</div>
</div>

Answer 2

它可以用CSS网格或Flexbox来完成。在这两种情况下，都应该使用img { width: 100%; object-fit: contain;。这将确保图像只消耗和填充可用空间。

CSS网格解决方案：

.imagetuple {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 5px;
}
img {
width: 100%;
object-fit: contain;
}

<div class="content">
<h4>Heading</h4>
<div class="imagetuple">
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG1</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG2</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG3</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG4</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG5</center>
</p>
</div>
</div>
</div>

Flexbox解决方案：

.imagetuple {
display: flex;
}
/* for spacing the images apart */
.imgContainer {
margin-right: 5px;
}
.imgContainer:last-of-type {
margin-right: 0;
}
img {
width: 100%;
object-fit: contain;
}

<div class="content">
<h4>Heading</h4>
<div class="imagetuple">
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG1</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG2</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG3</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG4</center>
</p>
</div>
<div class="imgContainer">
<img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
<p>
<center>IMG5</center>
</p>
</div>
</div>
</div>