centering friend and review buttons

I'm trying to center the tell-a-friend and review CSS buttons.
The prev/next row centers and aligns properly, all on one row.

The code looks like this:

<div class="centeredContent">

<!--bof Tell a Friend button 6/29/08 removed forward --> <div id="productTellFriendLink" class="buttonRow forward"><a href="http://localhost/bbf/index.php?main_page=tell_a_friend&products_id=1"><span class="cssButton button_TellAFriend" onmouseover="this.className='cssButtonHover button_TellAFriend button_TellAFriendHover'" onmouseout="this.className='cssButton button_TellAFriend'" style="width: 84px;" > Tell a Friend </span></a></div> <!--eof Tell a Friend button --> <!--bof Reviews button and count 6/29/08 removed and review count --> <div id="productReviewLink" class="buttonRow back"><a href="http://localhost/bbf/index.php?main_page=product_reviews_write&cPath=1&products_id=1&number_of_uploads=0"><span class="cssButton button_write_review" onmouseover="this.className='cssButtonHover button_write_review button_write_reviewHover'" onmouseout="this.className='cssButton button_write_review'" style="width: 80px;" > Write Review </span></a></div> <br class="clearBoth" /> <!--eof Reviews button and count --> </div> <!-- 6/29/08 end centeredContent div -->

but the resulting display in FF 2.x and IE 7.x looks like the attached css_buttons.gif

How do I fix this??

I don't have any display properties set. Display: block results in the prev/next row not displaying properly either, and display: inline does not help either.

Thank you, Tom