Question

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

这是我经过数小时研究后发现的：

我为所有图片设置了这个：

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

我为所有段落设置了这个：当段落的宽度小于10em（约200像素）时，它会将段落向下推到浮动图像。

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

（我必须添加！对其中一些人很重要或他们不会采取但是它仍然不接受保证金：0自动;）

谁能看到我做错了什么？

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中的变化。

如何将浮动在桌面上的小型移动设备的图像居中

1 个答案: