Centering an image with media queries when in mobile mode

Question

I'm using Bootstrap and I have the following code.

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

I'd like to write some CSS so that the image centers in the container above the text when being viewed on mobile.

The problem is I can't get it in the center.

Solution

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

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

adjust the mediaquery to your will.. i'm assuming "mobile" has a max width of 480px, but it's not necessary true, that's up to you.

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

the img tag is an inline element so you need to overwrite his natural behaviour on mobile with a mediaquery and center it with display:block;margin:0 auto;