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

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

根据您的意愿调整媒体查询。我假设“移动”的最大宽度为 480 像素，但这不一定是真的，这取决于您。

fiddle :http://jsfiddle.net/4y8tN/

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