Question

我想对齐两个图像和一个DIV。那是一个圆形框的DIV一直停留在两个图像的下方。

这是我的HTML / CSS：

.main {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 110px;
}

.one {
  float: right;
  height: 100px;
}

.two {
  height: 100px;
}

.box {
  position: absolute;
  height: 50px;
  width: 50px;
}

.rounded {
  border-radius: 10px;
  border-color: #FFF;
  border: 5px solid white;
}

<div id="main" class="main">
  <div id="one" class="one">
  </div>
  <div id="two" class="two"><img src="[![apple][1]][1]" width="100" height="76" /> <img src="[![titleofpage][1]][1]" width="309" height="61" />
    <div class="box rounded"></div>
  </div>
</div>

如何在页面中间居中的DIV中将它们全部对齐成直线？

Answer 1

您可以试用flexbox：

.flex-container-center {
  display: flex;
  align-items: center; /* this is what you need :) */
  justify-content: center;
}

<div class="flex-container-center">
  <img src="https://via.placeholder.com/200x200" />
  <img src="https://via.placeholder.com/100x100" />
  <img src="https://via.placeholder.com/200x50" />
</div>

此外，这里还有一个working example和我最喜欢的guide on flexbox：）

Answer 2

将display: flex和justify-content: center添加到.two类中；

.two {
  display: flex;
  justify-content: center;
  height: 100px;
}

使用display: flex时有主轴和横轴，您可以使用flex-direction: row或flex-direction: column设置主轴。默认值为flex-direction: row，而不调用它。这意味着在上面的示例中，主轴=行，交叉轴=列。

使用弹性框将项目居中时，有两个选择：

align-items: center
justify-content: center

align-items控制横轴，justify-content控制主轴。

在您的示例中，主轴是行，因为未调用flex-direction，所以它使用了默认行。要使项目在水平轴上居中，您必须使用justify-content，它使用主轴（弯曲方向）->行

Answer 3

我调整了CSS以使用网格视图，删除了绝对位置并浮动。添加边框，这样我就可以看到东西:)

.main{

position: block;
margin: 0 auto;
width: 600px;
height: 110px;
}

.one {
border: 5px solid blue;
height: 100px;
}
.two {
display: grid;
grid-template-columns: repeat(3, 30%);
height: 100px;
border: 5px solid yellow;
}

.box {
height:50px;
width:50px;

}
.rounded {
border-radius: 10px;
border-color:#FFF;
border: 5px solid red;

}

垂直对齐div和DIV内的两个图像

3 个答案: