How to align center some divs

HTML & CSS
1

I am trying to get a row of mixed divs to align horizontally center on the page. I would also like to move the Google Checkout logo up a bit so it is vertically centered relative to the logos on that row. Can you help me do these things? :slight_smile: TIA! Here’s what it looks like now:

I’ve tried doing a lot of things including profanity :x but no go. The screenshot is how the page looks now with this css:

.row div
{
height:75px;
float:left;
}
#AuthorizeNetSeal,#googleCheckoutLogo,#paypal
{
margin-top:25px;
}

and this html:

<div class="row">

<!-- (c) 2005, 2011. Authorize.Net is a registered trademark of CyberSource Corporation --> <div class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="---------";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payment Service</a> </div>

<img src="http://www.-------.com/forums/images-manual/small_cc_icon_discover.gif" >

<div><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=--------------" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0"></A><!-- End Official PayPal Seal --></div>

<div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=-------------&loc=en_US&f=png' ></script>

<span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=-------------"></script></span>

<img src="http://www.------------.com/images-manual/100satisguar80x79.gif">
</div>
2

Hi,
The first thing I would do is set them up as <li> (list-items) in a <ul> (unordered list).

From there I would use text-align to center the <li>s within the UL. If you need to set dimensions you can use inline-block.

When your in that format you will be able to use the vertical-align property on your <li>s. It looks like you might want to use vertical-align:middle;

Here is a simple example (view page source)

I don’t think whitespace nodes will be a concern for you in this case.

3

@Rayzur YOU are awesome! It works great…both the text-align and vertical-align, which made the obstinate Google script obey. There’s no way I would have known how to do that. But now I’ve learned. This is an elegant solution too.

4

Glad it worked out for you :slight_smile:

>>It works great…both the text-align and vertical-align

Yes, vertical-align comes in very handy some times. It only works on inline elements and tables (display:table; too)

[I]>>This is an elegant solution too.

[/I]It’s nice because the text-align centers them too since they are inline elements. The added benefit is that it centers list-items with auto widths, the content of each li determines it’s width.

As I mentioned, you probably would not notice the whitespace nodes in your case but they are still there. When the list items are formatted on new lines in the html it will create whitespace.

You can remove them without altering the html if you ever need to.