Display CENTERED series of images

Question

I have a line of three images that currently display very well.

Now I want to display two more images directly below these three, and I want them to be centered (this would be like an inverted pyramid).

No matter what I do, the bottom line stays left.

Here .css

.category { width:176px; font-size:80%; text-align:center; float:left; position:relative; } 

Here's the html:

  <div style='width:95%; align:center'> <div class='category'><a href='individual.php'><img src='images/individual.jpg' style="padding-bottom:0.0em;" border='0' alt='Individual Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a> <b>Individuals</b></div> <div class='category'><a href='community.php'><img src='images/community.jpg' style="padding-bottom:0.0em;" border='0' alt='Community based Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a> <b>Communities</b></div> <div class='category'><a href='/police'><img src='images/first_respond.jpg' style="padding-bottom:0.0em;" border='0' alt='Police and send Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a> <b>Fire/Police</b></div> <br> <div class='category'><a href='business.php'><img src='images/business.jpg' border='0' alt='Electronic Crime Watch Alerts by Email and Text Messaging for Businesses'></a> <b>Businesses</b></div> <div class='category'><a href='utility.php'><img src='images/utility.jpg' border='0' alt='Phone, Cable, Water, Gas and Power Outage Alerts'></a> <b>Utilities</b></div> </div> 

Here you can see the original three: http://www.neighborhoodwatchalerts.com/

Since I do not want the test page to be displayed in search engines, you can take the above URL and add index2.php to it and see all 5 images.

Any suggestions would be appreciated!

Answer 1

If you set the category div for the css display:inline-block property, they obey the container's text-align: center rule.
here is the violin

Layout Example

 <div class="container"> <div class="category"></div> <div class="category"></div> <div class="category"></div> <br/> <div class="category"></div> <div class="category"></div> </div> 

Css

 .container{ border: 1px solid #ccc; text-align: center; } .category{ display: inline-block; width: 100px; height: 100px; background: #ccc; margin: 5px; } 

Answer 2

One quick way to do this is to wrap the bottom two div in another div and center using margin: 0 auto; .

So something like

 <div id="somethingWrapper"> <div class='category'><a href='business.php'> <img src='images/business.jpg' border='0' alt='yada'></a> <b>Businesses</b></div> <div class='category'><a href='utility.php'> <img src='images/utility.jpg' border='0' alt='yadayada'></a> <b>Utilities</b></div> </div> 

CSS

 #somethingWrapper{ width:352px; //or something close margin:0 auto; } 

Fyi ... 0 in margin can cause two lines to be too close. You may need to configure.