在移动模式下使用媒体查询居中图像

Question

我正在使用Bootstrap，我有以下代码。

<div class="row">
    <div class="col-sm-12">
        <p style="margin-top:13px">
            <img style="width: 200px; height: 78px;" src="/PATH_TO_IMAGE/unnamed%20copy%203.jpg" alt="">Praesent vehicula libero sed nisl dapibus aliquet. Ut ultricies nisi tempus, blandit nisl ut, tincidunt diam. Pellentesque non sapien sed massa mattis tristique. Nullam posuere purus elit. Vivamus sollicitudin placerat orci, id sodales sapien aliquam at. Cras vitae pretium dolor. Proin eu lectus id quam volutpat sollicitudin ut in orci.
        </p>
    </div>
</div>

我想写一些CSS，以便在移动设备上观看时，图像位于文本上方的容器中。

问题是我不能把它放在中心。

Answer 1

@media all and (max-width:480px) {

    img {display:block;margin:0 auto;}
}

根据您的意愿调整媒体查询..我假设＆＃34;移动＆＃34;最大宽度为480px，但不一定是真的，这取决于你。

小提琴：http://jsfiddle.net/4y8tN/

img标记是内联元素，因此您需要使用媒体查询覆盖其在移动设备上的自然行为，并将其与display:block;margin:0 auto;

对齐

Answer 2

将此样式添加到img标记

保证金：0自动;