图像中心在多个Divs CS中

我需要将图像集中在多个Divs的内部。我尝试休息的一切。

这是四个盒子，交替红色＆amp;蓝色 - 水平。希望将它们集中在页面中，并将其推到另一个Div块下面。在每个块中是一个图像，该图像以相对红色或蓝色框的各个侧面为中心。您可以在下面看到我尝试将图像直接放置在红色框/蓝色盒子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：

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

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

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

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

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

我相信我有您在这里寻找的东西，我刚刚out了：https：//jsfiddle.net/9ylspwr6/5/

代码之前的几个要点...

为了让所有的div元素" float''离开您要应用Div.ClassName {float：left;}这将确保Divs float float float float float float float und of tof to rap to rap them of them of stace（就像段落一样（很像段落）文字）。有关CSS Float属性的更多信息：https：//www.w3schools.com/css/css_float.asp
垂直边距不支持"边距：自动；"就像水平的一样。保证金可以由Div.ClassName {margin：0px 0px 0px 0px;}或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;
}

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

相关内容

最新更新

热门标签：