html - 尝试使用 CSS 和媒体查询进行 float 更改

Question

我正在尝试使图像 float 在左侧，以便在横向和纵向移动设备上方的所有媒体查询以及移动设备和下方然后图像完全显示 block ，即中心位置。

总结:

移动设备或以下设备(最小设备宽度:320 像素)= 图像为完整 block (中心)

高于 320 像素 = 向左浮动的图像。

虽然我无法让它工作......

这是我的 CSS:

.img-float {
  float:left;margin:0 20px 20px 0;
  }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .img-float {
   display:block;
   margin-left: auto;
   margin-right: auto;
 }
}

这是标记:

<p>
    <img src="https://dummyimage.com/175x80/000/fff" class="img-float">

    FutureCon put on a great show and they&#8217;re touring the US at the moment with over a dozen different IT Security Events throughout the United States. These events are particularly good for networking and advancing your career.
</p>

我为图像使用类是否做错了？

不确定如何进行这项工作。

感谢所有帮助。

Answer 1

如果图像没有 float ，则 display 和 margin 会将其居中。

……但它是 float 的。

你也需要阻止它 float :

float: none