Question

所以我正在尝试制作一个具有固定高度和宽度的支架。在这个支架内，我想放置根据这个支架调整高度和宽度的图像。这一切都有效，但我很难理解垂直对齐的工作原理。 为什么我必须使用helper类和product-image类对div进行对齐？我不明白为什么我需要将这个div与helper类一起使用来实现它工作

.product-holder {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 15px 15px;
  background-color: white;
  border: 1px solid black;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.product-image {
  max-height: 240px;
  max-width: 240px;
  vertical-align: middle;
}

<div class="product-holder">
  <div class="helper"> </div>
  <img class="product-image" src="http://cdn3-www.dogtime.com/assets/uploads/2011/01/file_23262_entlebucher-mountain-dog-300x189.jpg">
</div>

Answer 1

当您使用text-align水平对齐元素时，left，right和center意味着与包含的左边缘，右边缘和中心对齐阻止。

垂直对齐非常不同。

内联级元素与彼此垂直对齐，而不是与其包含块对齐。

辅助器是包含块的高度，因此它的垂直中间位于包含块的一半。

您的垂直对齐方式是：在辅助div的垂直中间处放置一条水平线，并在图像的垂直中间处放置一条水平线水平线连接起来形成一条水平线。

如果您只将助手设置为vertical-align:middle，那么您说：在辅助div的垂直中间处放置一条水平线，并通过放置一条水平线底部图像，使两条水平线连接起来形成一条水平线。

如果您只将图片设置为vertical-align:middle，那么您说：在辅助div的底部处放置一条水平线，在垂直处放置一条水平线中间图像，使两条水平线连接起来形成一条水平线。

如果您既不设置为vertical-align:middle，那么您说：在辅助div的底部和底部的水平线<处放置一条水平线，使两条水平线连接成一条水平线。

Answer 2

我建议如下所述解决居中问题：DIV和img以及top: 50%，left: 50%和transform: translate(-50%, -50%)之间的相对/绝对关系。无需额外元素。浏览器兼容性比flexbox解决方案更好。

＆＃13;

.product-holder {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 15px 15px;
  background-color: white;
  border: 1px solid black;
}
.product-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 240px;
  max-width: 240px;
}

＆＃13;

<div class="product-holder">
  <img class="product-image" src="http://cdn3-www.dogtime.com/assets/uploads/2011/01/file_23262_entlebucher-mountain-dog-300x189.jpg">
</div>

＆＃13;

Answer 3

所以，除非您需要支持非常旧的浏览器，并且由于其他人提供了您的问题的替代方案，我也会发布，基于 flexbox ：

.product-holder {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 15px 15px;
  background-color: white;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image {
  max-height: 240px;
  max-width: 240px;
}

Codepen demo

More on flexbox

Browser compatibility

我需要解释为什么我需要垂直对齐两次以使我的图像居中

3 个答案: