如何避免图像重叠

时间：2018-03-23 14:17:52

标签： html css

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

6 个答案:

答案 0 :(得分：0)

top：50％表示，元素顶部放置在父母的50％中。左属性也是如此。

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

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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
var parameterExp = Expression.Parameter(typeof(T), "item");
var layerExp = Expression.Property(parameterExp, "Layer");
var propertyExp = Expression.Property(layerExp, "Hierarchy");

// StartWith method
MethodInfo methodStartsWith = typeof(string).GetMethod("StartsWith", new[] { typeof(string) });
var valueStartsWith = Expression.Constant(string.Concat(hierarchy, "|"), typeof(string));

var methodExpStartsWith = Expression.Call(propertyExp, methodStartsWith, valueStartsWith);

// Equals method
MethodInfo methodEquals = typeof(string).GetMethod("Equals", new[] { typeof(string) });
var valueEquals = Expression.Constant(hierarchy, typeof(string));

var methodExpEquals = Expression.Call(propertyExp, methodEquals, valueEquals);

var orElseExp = Expression.OrElse(methodExpStartsWith, methodExpEquals);
var orElse = Expression.Lambda<Func<T, bool>>(orElseExp, parameterExp);

return query.Where(orElse);
＆＃13;
＆＃13;
＆＃13;

只需将子元素显示为内联块，并将父元素的<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

答案 2 :(得分：0)

试试这样：

<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>

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

答案 3 :(得分：0)

您可以尝试以下代码吗？如果有帮助请告诉我

  <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>

答案 4 :(得分：0)

尝试这种简单的方法来执行此操作。 

<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;">

答案 5 :(得分：0)

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

.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

相关问题
最新问题