Member Avatar for ppetree
ppetree 2 Junior Poster

I have a row of three images that are currently displaying just fine.

Now, I want to display two more images right below those three and I want them centered (it would kinda look like an upside down pyramid).

No matter what I do, the bottom row stays left aligned.

Here's the .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's were you can see the original three:

Because I dont want the test page to show up in the search engines you can take the above URL and add index2.php onto it and see all 5 images.

Any suggestions would be appreciated!

  • 1 Contributor
  • 0 Replies
  • 196 Views

Dani AI

Generated

— the bottom row is staying left-aligned because the items are floated and you’re trying to force a new row with a <br> and an invalid align="center" on the wrapper. Floated elements are taken out of normal flow, so they won’t be re-centered by a stray <br>. Two simple, robust fixes are: stop floating the tiles and center them with either flexbox (modern) or inline-block (widely compatible).

Flexbox (recommended):

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tile {
  flex: 0 0 180px;   /* use whatever width matches your images */
  text-align: center;
  margin: 6px;
}

HTML stays simple — a single wrapper with five children. Flexbox will wrap the third and then place the remaining two centered beneath automatically.

Inline-block (if you need old-browser support):

.gallery { text-align: center; font-size: 0; }
.tile { display: inline-block; vertical-align: top; width: 180px; font-size: 14px; text-align: center; margin: 6px; }

Note: inline-block introduces small whitespace gaps between elements; setting font-size: 0 on the parent (then restoring font-size on children) is the usual fix.

If you must keep floats, center the whole group by wrapping each row in a container with a calculated width and use margin: 0 auto;, or use a clearfix (.clearfix::after { content: ""; display: table; clear: both; }) to control flow — but removing floats is cleaner.

Finally, remove the invalid align attribute on the div, avoid using <br> to control layout, and use the browser inspector to verify computed styles (look for float and display on the tiles).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.