Question

我有一个带浮动左属性的div，我想把这个div放在移动版本中。

我尝试将float none和清除内部/内部清除到媒体查询但没有任何改变。

这是代码：

.img-head {
  float: left;
  margin: 10px;
}

@media (min-width: 768px) and (max-width: 980px) {
  .img-head {
    clear: both;
    text-align: center;
    float: none;
  }
}

@media (max-width: 767px) {
  .img-head {
    clear: both;
    text-align: center;
    float: none;
  }
}

<div class="img-head">
  <img src="/nutickets2/images/evento-1.png">
</div>

Answer 1

默认情况下。 <div>显示样式为block。它适合100％宽度的包装，高度是自动的。

要使此<div>位置位于包装器中心，如果 div的宽度小于包装器宽度，则应将此<div>设置为display:inline-block;（所以宽度不是100％自动。使用display：inline-block;此<div>将自动跟随此<div>内的内容宽度。所以在那之后，这个<div>将有一个间隙（带有包装器的空间）。现在将左边距设置为auto左右。因此，<div>的位置将转到包装器的中心。

.img-head {
    display:inline-block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    text-align: center;
    float: none;
  }

在移动版本中居中div（float：left;）

1 个答案: