使用CSS调整不同设备中的文本和图像行为

Question

我有这个网页，顶部有一个图像，右边和底部有段落。这是我正在使用的CSS（抱歉CSS直接在HTML中，我必须这样做）

<div style="float:left" class='wrapper'>

<img border="0" src="images/about.png" style="float:left;margin-right:2em;margin-bottom:2em">

<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>

<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>

</div>

即使在手机中它似乎也能正常工作。但我希望在移动设备或平板电脑（较小的屏幕）中显示图像时，图像位于页面顶部。目前，当我在移动设备中打开网站时，图像靠近页面的左侧。我希望它与页面中心对齐。

下图显示了我希望如何在大屏幕和手机中显示它（请注意，这并不是现在发生的情况。第二张图像是我想要实现的，但目前图像更接近左边距，而不是与中心对齐）

哦，我只能使用CSS。有可能吗？

谢谢大家！

Answer 1

您需要在CSS文件中使用媒体查询 这将为宽度低于640px的屏幕添加属性。

@media screen and (max-width:640px){
   img{
        float:none !important;
        display:block;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

但是必须从HTML中删除float:left并将其放入css文件中，否则内联样式将覆盖媒体查询

如果你真的无法修改HTML。你应该在媒体查询写中写float:none !important;，但使用它是一个不好的实践！重要

<强>更新
实例http://jsfiddle.net/7d3Lv/2/
尝试调整结果框的大小