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

我有这个网页，上面有一个图片，右边和底部有段落。这是我正在使用的CSS（对不起，CSS直接在HTML中，我必须这样做）

Lorem ipsum此处
Lorem ipsum此处

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

下面的图片显示了我希望它在大屏幕和手机上的显示方式（请注意，这并不完全是现在发生的事情。第二张图片是我想要实现的，但目前图片更靠近左边距，而不是与中心对齐）

哦，我只能用CSS。可能吗

---

谢谢大家!

您需要在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！重要的在媒体查询中写入，但这是一个糟糕的做法！重要的

更新

实例

尝试调整结果框的大小
嘿，谢谢你的回答。我试过了，但它没有对准中心。它保持在屏幕上left@VictorFerreira我更新了我的答案，我忘了添加
margin:auto
@media screen and (max-width:640px){
   img{
        float:none !important;
        display:block;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}