如何避免图像重叠答案

【问题标题】：How to avoid image overlapping如何避免图像重叠
【发布时间】：2023-04-06 04:29:01
【问题描述】：

<div style="width:100%;text-align: center;">
  <div style="float:left; width:150px;max-width:150px;margin:5px">
    <div style="display:block;margin: 0 auto;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
  </div>
  <div style="float:left; width:150px;max-width:150px;margin:5px">
    <div style="display:block;margin: 0 auto;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
  </div>
  <div style="float:left; width:150px;max-width:150px;margin:5px">
    <div style="display:block;margin: 0 auto;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
  </div>
  <div style="float:left; width:150px;max-width:150px;margin:5px">
    <div style="display:block;margin: 0 auto;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
  </div>
  <div style="float:left; width:150px;max-width:150px;margin:5px">
    <div style="display:block;margin: 0 auto;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
  </div>

我想在水平中心进行图像预览。如何水平居中对齐这个 div？我知道是因为从左侧开始浮动左行，但我希望该行从中心对齐开始。

【问题讨论】：

不要使用绝对定位
那如何水平居中对齐？
从图像中删除绝对位置。将 div 上的 Float:left 替换为：“display:block;margin:auto;”。
最简单的方法（但老式方法）是将图像标签放在标签之间。
Aligning multiple images horizontally in the center of a div的可能重复

标签： html css

【解决方案1】：

top: 50% 的意思是，元素的顶部放置在 50% 的父元素中。 left 属性也是如此。

要使图像水平居中，我建议使用边距而不是绝对位置。

img {
    display: block;
    margin: 0 auto;
    max-width: 150px;
}

【讨论】：

但我想居中对齐子 div 而不是图像
这会将图像仅定位在div中，但上div只有150px；

【解决方案2】：

<div style="text-align:center">
  <img style="max-width:150px;display:inline-block" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
  <img style="max-width:150px;display:inline-block" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
  <img style="max-width:150px;display:inline-block" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
  <img style="max-width:150px;display:inline-block" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
</div>

只需将子元素显示为内联块并将父元素的text-align属性设置为center

【讨论】：

【解决方案3】：

试试这样：

<div style="width:100%;text-align: center;position: relative;">
        <div style="display:inline-block;margin:5px;"> 
            <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
        </div>
        <div style="display:inline-block;margin:5px"> 
            <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
        </div>

        <div style="display:inline-block;margin:5px;">
            <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
        </div>
        <div style="display:inline-block;margin:5px;">
            <img style="height:auto;width:auto;max-width: 150px;max-height: 150px;" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
        </div>
    </div>

如果你给元素添加类应该会更好，如果你需要修改它，你只做一次。

【讨论】：

一旦这个问题解决了，我会添加一个课程顺便说一句谢谢你的建议。

【解决方案4】：

你能试试下面的代码吗？如果有帮助请告诉我

  <div style="width:100%; margin-left:20% ">
   <div style="width:150px;max-width:150px;float:left;margin: 5px;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px; " 
      src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
   <div style="width:150px;max-width:150px;float:left;margin: 5px;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px; " 
      src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
   <div style="width:150px;max-width:150px;float:left;margin: 5px;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px; " 
      src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
   <div style="width:150px;max-width:150px;float:left;margin: 5px;"> <img style="height:auto;width:auto;max-width: 150px;max-height: 150px; " 
      src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg"> </div>
</div>

【讨论】：

【解决方案5】：

试试这个简单的方法。

<img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg" style="display: block; margin: 0 auto; padding: 10px;">
<img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg" style="display: block; margin: 0 auto; padding: 10px;">
<img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg" style="display: block; margin: 0 auto; padding: 10px;">
<img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg" style="display: block; margin: 0 auto; padding: 10px;">

【讨论】：

【解决方案6】：

我不太确定，但我认为您正在寻找类似的东西。

.flex-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}

img {
    margin: 5px;
    max-width: 150px;
    max-height: 150px;
}

<div class="flex-center">
    <img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
    <img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
    <img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
    <img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
    <img src="https://www.vsss.co.in/Admin/uploads/472075/POLAN_preview.jpg">
</div>

看到这个Example

【讨论】：