image - 如何将漂浮在桌面上的小型手机图像居中

Question

我经常在桌面上围绕文本向左或向右浮动图像，但我希望它们在小型移动设备上居中，并且使用响应式设计将段落放在图像下方。我使用在线移动查看设备将段落放在图像下方，但当我尝试通过计算机查看时却没有。该图像不会在线或在我的计算机上居中。

经过数小时的研究，这是我的发现:

我为所有图像设置了这个:

img{
   border:0;
   max-width:100%; 
   height:auto;
}

我为所有段落设置了此设置:当段落宽度小于 10em(约 200 像素)时，它会将段落向下推到 float 图像下方。

p:before{
   content: "";
   width: 10em;
   display: block;
   overflow: hidden;
}

我已将以下图像应用于小于 320 且最大为 480 的媒体查询:

img{
   max-width:100%;
   display:block!important; 
   margin:0 auto !important; 
   float:none !important; 
}

(我必须向其中一些添加 !important 否则他们不会接受但它仍然不接受 margin: 0 auto; )

谁能看出我做错了什么？

Answer 1

这里有您需要的工作更新:http://jsfiddle.net/ancpjmet/3/

我将 min-devide-width 更改为 min-width 并将 max-devide-width 更改为 max-width 以便能够在 Google Chrome 中的桌面浏览器上看到更改。

您必须将 div 包装 img 设置为 float: none;，而不是 img:

@media only screen and (min-width:320px) and (max-width:480px) {
    #image-wrapper{
        float: none !important;
    }
    #image-wrapper img{
        max-width: 80%;
        display: block;
        margin: 0 auto;
    }       
}

我还重建了你的 .clearfix 类，使其更加一致并在所有浏览器中工作:

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }

查看给定的 jsfiddle 中的更改。