CODEWITHSUNDEEP
htmltwitter-bootstrap-3
300
300

Reputation: 1031

Why bootstrap class center-block with img-responsive is not positioning image at center

I am trying to align an image at center using bootstrap classes img-responsive and center-block. But somehow the image doesn't get aligned at center horizontally when tested from browser (IE and chrome).

Strange that same html when tried using fiddle aligns it at center.

Can you please help me find what can I correct in code so the image is centered on the page horizontally?

Fiddle is at demo

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <img src="http://www.wallpapersonly.net/wallpapers/monocles-lens-testing-1280x800.jpg" class="img-responsive center-block">        
    </div>
  </div>
</div>

Upvotes: 0

Views: 826

Answers (1)

Pedro Moreira
Pedro Moreira

Reputation: 965

As you mentioned, it seems to be working on JSFiddle; probably because the preview doesn't get to be interpreted as a large screen.

You are using a col-md-8 as parent of the image, so the area considered by the image is reduced and aligned to the left, therefore, it doesn't look centered to the whole screen;

To solve it, you can either remove the col-md-8 class or add col-md-offset-2 to it;

You can check out more about grids at http://getbootstrap.com/css/#grid-responsive-resets

Upvotes: 2

Related Questions