1

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?

chaseha
  • 32
  • 1
  • 7

1 Answers1

4

try this:

.row-fluid{text-align:center;}
.img-responsive{margin:0 auto}
Devin
  • 7,690
  • 6
  • 39
  • 54