css 如何使div的宽度适合内容并使父div居中？

wydwbb8l 于 2023-03-14 发布在其他

关注(0)|答案(4)|浏览(238)

这是我的HTML和CSS：

.main {
  float: left;
  justify-content: center;
}

.img_list {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.img_item {
  padding-top: 10px;
  display: inline-block;
}

<div class="main">
  <div class="img_list">
    <div class="img_item">
      <p>＜Hinh 1＞</p>
      <img src="../a/1.jpg" />
    </div>
    <div class="img_item">
      <p>＜Hinh 2＞</p>
      <img src="../a/1.jpg" />
    </div>
    <div class="img_item">
      <p>＜Hinh 3＞</p>
      <img src="../a/1.jpg" />
    </div>
    <div class="img_item">
      <p>＜Hinh 4＞</p>
      <img src="../a/1.jpg" />
    </div>
  </div>
</div>

这是目标结果：

如何将“img_list”居中，如下所示：

注意：我已经编辑了“main”的css：

.main{
    display: flex;
    justify-content: center;
}

结果：缩放= 100%：

如果我缩小，放大，它仍然左对齐：

我希望它居中：

css

来源：https://stackoverflow.com/questions/75718176/how-can-fit-width-of-div-to-content-and-center-parent-div

4条答案

按热度按时间

ego6inou1#

要使div的宽度适合内容并使父div居中，必须将父div设置为display：Flex和对齐内容：center，它将使子div在父div内水平居中。
子div设置为**显示：inline-block，**这将使它适合其内容的宽度。这意味着子div将只占用其内容的宽度，而不是拉伸以填充父div的宽度。

赞(0）回复(0）举报 2023-03-14

hgtggwj02#

只需更换它，它应该适合您

.main{
    display: flex;
    justify-content: center;
}

赞(0）回复(0）举报 2023-03-14

83qze16e3#

在小屏幕上内容移到左边的原因是因为屏幕宽度变小，因此最后一张图片被推到下一行。我已经更新了我的答案。

.main {
  display: flex;
  justify-content: center;
}

.img_list {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  text-align: center;
}

.img_item {
  padding-top: 10px;
  display: inline-block;
}

希望这个有用。

赞(0）回复(0）举报 2023-03-14

ia2d9nvy4#

.main {
  width: 80%;
  margin: auto;
}

.img_list {
  display: flex;
  flex-warp: wrap;
  text-align: center;
}

.img_item {
  Width: auto;
  gap: 10px; //if want space add this css
}

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何使div的宽度适合内容并使父div居中？

4条答案

相关问题

热门标签

最新问答