Search code examples
htmlcsstwitter-bootstrapfluid-images

Bootstrap container-fluid image not centered after max width

I have an image (currently 1305 x 352 pixels) inside of a fluid-container like so: 

<div class="container-fluid" id="lion-div">
    <div class="row-fluid">
        <img src="image.png" class="img-responsive"></img>
    </div>
</div>

When the page width is at or smaller than the width of the image, the image scales to the full width of the page, which is what I want.

However, when the page width is larger, the image stays aligned to the left. I'd like it to stay in the middle of the page.

I've tried using margin-left and margin-right: auto on the div, even making a media container with min-width: 1306px and trying everything I know, but I can't get the image to center. Any ideas?

Solution

  • try this:

    .row-fluid{text-align:center;}
.img-responsive{margin:0 auto}