使响应图像居中

Question

On a page, I have an image that I want centered on the screen (horizontally).

It's responsive, so that it resizes as the screen gets too small.

<img class="img-responsive" src="~/Content/Images/marketing/combined-displays.png" />

I was using around it, but W3C gets cross with this, and wants me to use styles instead.

So, I read up, and found this to try center images:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}

I then change the

to this:

<p class="blocktext">
    <img....>
</p>

But then the image goes tiny, in the middle of the screen.

So I removed the width, but then it doesn't centre at all.

How can I make this class center my image in the middle of the screen?

Answer 1

You could change the display type of the image to block and align it to the center by margin: 0 auto declaration.

Besides, Twitter bootstrap has a built-in class called .center-block that exactly do the same:

Example Here

<img src="http://placehold.it/150x150" class="img-responsive center-block">

And .img-responsive would handle the rest:

.img-responsive { /* Taken from Twitter bootstrap source */
    display: block;
    max-width: 100%;
    height: auto;
}

Answer 2

Simple css solution is

img {
      display:block;
      margin:0 auto;
      max-width:100%;
    }

max-width:100%; makes sure that the img isnt wider than the parent