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

Question

CSS 和 HTML 的新手，我正在尝试构建一个简单的网站，显示 5 张并排的图像，并在 window 调整大小时重新缩放。到目前为止我所拥有的效果很好，但是包含 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: '795';  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "96";  /* 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。浮动在现代网络中只有一个有效目的，那就是让文本环绕图像或其他媒体容器。不要将它们用于结构布局。

The center tag is deprecated.。不要使用它。反正你不需要在那里居中。

查看我的 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-Grid 或 Flexbox 来完成。在这两种情况下，您都应该使用 img { width: 100%; object-fit: contain;。这将确保图像仅消耗并填充可用的 space.

CSS-grid解法：

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

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

Center nested resizable divs to body page

html

css

resize

css-float

center