Question

我需要将图像置于多个div中。我尝试的一切都破了。

这是四个盒子，交替红色＆amp;蓝色 - 水平。希望它们在页面中居中并在另一个div块下推到顶部。在每个块内是一个图像，它在相对红色或蓝色框的所有边上以相同的％边距为中心。您可以在下面看到我尝试将图像直接放置在redbox / bluebox div中，或者甚至更深一层地使用仅用于图像的框。

4框示例 - HTML：

<div id="box-container">
  <!-- Trying natively within a box -->
  <div class="bluebox">
    <img src="images/1.jpg">
  </div>
  <div class="redbox">
    <!-- Trying one-layer deeper with its own div -->
    <div class="thumbnail">
      <img src="images/2.png">
    </div>
  </div>
  <div class="bluebox">
    <div class="thumbnail">
      <img src="images/3.jpg">
    </div>
  </div>
  <div class="redbox">
    <div class="thumbnail">
      <img src="images/4.png">
    </div>
  </div>

CSS：

＆＃13;

box-container {
  height: 900px;
  width: 950px;
  padding: 12px;
  display: inline-block;
  vertical-align: top;
  margin-left: auto;
}

.bluebox {
  height: 150px;
  width: 170px;
  background-color: cornflowerblue;
  display: inline-block;
  border: 3px solid black;
}

.redbox {
  height: 150px;
  width: 170px;
  background-color: lightcoral;
  display: inline-block;
  border: 3px solid black;
}

.thumbnail img {
  display: block;
  margin: auto;
  height: 130px;
  width: 150px;
}



<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

<div id="box-container">
  <!-- Trying natively within a box -->
 <div class="bluebox">
    <div class="thumbnail">
      <img src="http://placehold.it/400x400.jpg">
    </div>
  </div>
  <div class="redbox">
    <!-- Trying one-layer deeper with its own div -->
    <div class="thumbnail">
      <img src="http://placehold.it/400x400.jpg">
    </div>
  </div>
  <div class="bluebox">
    <div class="thumbnail">
      <img src="http://placehold.it/400x400.jpg">
    </div>
  </div>
  <div class="redbox">
    <div class="thumbnail">
      <img src="http://placehold.it/400x400.jpg">
    </div>
  </div>

＆＃13;

Answer 1

.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
  display: block;
  margin: 0 auto;
}

或

.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
  text-align: center;
}

使用flexbox

.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

您需要根据缩略图div的高度为图像添加填充。

.thumbnail img {
  display: block;
  height: 130px;
  width: 150px;
  padding: 10px;

}

Answer 3

我相信我在这里有你想要的东西JSFiddle我刚刚宣布：https://jsfiddle.net/9yLspwr6/5/

代码前的几个关键点......

为了让所有div元素'float'离开你，你应该使用div.className {float：left;}这将确保divs从左到右浮动并在空间不足时环绕（就像段落一样）的文本）。有关CSS浮动属性的更多信息，请访问：https://www.w3schools.com/css/css_float.asp
垂直保证金不支持'保证金：自动;'就像水平一样。保证金可以通过div.ClassName {margin：0px 0px 0px 0px;} OR div.className {margin：0px auto;}来定义。这种方式的第一个元素是上/下边距。第二个是左/右边距。我不得不使用一点数学来垂直居中你的图像，但它可以满足你的需要。以下是关于保证金的一些好文档：https://www.w3schools.com/cssref/pr_margin.asp
清理HTML并删除了一些不再需要的CSS。我这样做是为了在维护解决方案的同时简化代码。如果将此代码放入网站，则需要确保仅定位适当的标记。例如 - 我的代码定位所有img标记。您可能希望在所需的IMG标记上放置一个类或ID，然后确保它反映在CSS中。

我修改了HTML很多。删除了许多用于故障排除的不必要元素。

  <div class="bluebox">
    <img src="images/1.jpg">
  </div>

  <div class="redbox">
      <img src="images/2.png">
  </div>

  <div class="bluebox">
      <img src="images/3.jpg">
  </div>

  <div class="redbox">
      <img src="images/4.png">
  </div>

下面修改了CSS：

.bluebox {
  height: 150px;
  width: 170px;
  background-color: cornflowerblue;
  display: inline-block;
  border: 3px solid black;
  float:left; // new.  essentially left justifies the divs.
}

.redbox {
  height: 150px;
  width: 170px;
  background-color: lightcoral;
  display: inline-block;
  border: 3px solid black;
  float:left; // new
}

img { // simplified the target.  wrap entire contents of the HTML with a different DIV id to target only images within that div
  display: block;
  margin: 10px auto; // added 10px.  it will then apply 10px margin to top and bottom, auto on left/right
  height: 130px;
  width: 150px;
}

应该这样做。希望它有所帮助！

图像中心内有多个div CSS

3 个答案: