尝试使用 CSS 和媒体查询进行浮动更改答案

【问题标题】：Trying to make a float change using CSS and Media Query尝试使用 CSS 和媒体查询进行浮动更改
【发布时间】：2019-07-14 22:21:53
【问题描述】：

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

总结：

移动设备或以下（min-device-width : 320px）= 图像要全块（中心）

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

我在为图像使用类时做错了吗？

不知道怎么做。

感谢大家的帮助。

【问题讨论】：

标签： html css

【解决方案1】：

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

…但它是浮动的。

您还需要阻止它浮动：

float: none

【讨论】：

我添加了这一点，但并不高兴 - 即使屏幕解决方案简化为移动查询，图像仍保持左对齐（left-float）。
由于我懒得在您的媒体查询中找到满足物理限制的设备，因此我对其进行了调整以使用简单的最大宽度，然后在我的桌面浏览器中对其进行了测试。当我添加 float: none 时它运行良好。
是的，我搞定了——@media (min-width: 768px) 运行良好。感谢您的帮助！