I am trying to center a div that contains multiple 145px X 145px thumbnail images without setting a fixed width. The goal is to have as many images in each row as the browser window can fit. However, I want to keep the images left-aligned within the centered div. Using text-align: center won't work because it centers the entire row, including any leftover images in the last row. Is there a way to achieve this using CSS alone, or would JavaScript be necessary?
You can view my example on jsbin here: http://jsbin.com/eTukegu/3/edit
(Please note that I have used 7 thumbnail placeholder divs for demonstration purposes)
<div id="thumbnail_container">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
CSS:
#thumbnail_container
{
margin: 5px;
padding: 0;
}
.thumbnail
{
width: 145px;
height: 145px;
background-color: #fff;
display: inline-block;
margin: 5px 1px 1px 5px;
padding: 0;
}