如何在不知道子元素宽度的情况下将元素置于 div 中？ [复制]答案

【问题标题】：How do I center an element within a div without knowing the child element's width? [duplicate]如何在不知道子元素宽度的情况下将元素置于 div 中？ [复制]
【发布时间】：2021-05-11 15:24:35
【问题描述】：

我有一个宽度为 100%、高度为 90 像素的 div。在 div 内部，我有一个高度为 90px 的 img，但我让宽度自行设置。那么如何在不知道它的宽度的情况下设置带有 div 的 img 呢？

【问题讨论】：

margin: 0 auto
尝试将子元素的宽度设置为“fit-content”或“inherit”
如果高度为 90 像素的图像对于容器来说太宽，您希望发生什么？

标签： html css

【解决方案1】：

关于 img 元素居中的一些有用的讨论 https://stackoverflow.com/questions/34247337/object-fit-not-affecting-images

这是一个 sn-p，它基于来自 @MohammadImami 的链接中的最新答案以 img 为中心

您可以尝试更改 img 的尺寸（网址中的最后两个分别是宽度和高度），看看会发生什么。一切都很好，除非 img 与 90px 的高度相比太宽以至于无法容纳，在这种情况下，此代码会缩小高度以确保整个 img 包含在容器中。它垂直居中和水平居中。不知道你会不会遇到这种情况。这似乎是最明智的做法 - 所以没有任何 img 被裁剪掉。但我不知道你在这种极端情况下的要求。

.container {
  width: 100%;
  height: 90px;
}
.container img {
  height: inherit;
  width: inherit;
  object-fit: contain;
  object-position: center;
}

<div class="container">
  <img src="https://picsum.photos/id/1016/1024/768">
</div>

【讨论】：

【解决方案2】：

如果你想在div内居中图片，可以试试

img {
   margin: 0 auto;
}

它会让上下边距为0px，左右为自动（居中）。

如果您希望图像覆盖整个宽度，请使用 background-image 属性

div {
   background-image: url('image.jpg');
}

我不知道这是不是你想做的。

【讨论】：