1

I'm using this solution to place "like" buttons on my page in an inline fashion. Basically, the buttons are placed inside li elements inside a ul. So far, that works.

The buttons are located in the footer of my page. Problem is, they align to the left of the page, when I want them to be centered. I've tried everything I can think of but can't seem to center them horizontally.

I've set up a JSFiddle here. (You'll notice Bootstrap is a dependency. My site uses it, so your answer can take advantage of it if necessary, but doesn't have to.)

Thanks.

3 Answers 3

3

Couple of things; why do you have the ul floated left? This is forcing that element to go to the left, no matter what you do. If you set a width to the ul, I tested 350px, and then left and right margin to auto, you should be nice and center. You will also need to add a 'clearfix' div to the ul so that the copyright stays at the bottom. See my code below:

HTML Example:

<ul>
    <li>.....<li>
    <li>.....</li>
    etc....
    <div class="clearfix"></div>
</ul>

CSS (Yours corrected):

ul.like-buttons{
list-style: none;
margin: 5px auto 20px auto;
padding: 0;
width: 350px;
}

CSS Clearfix:

.clearfix {
    clear:both;
}

So, all I did was get rid of the float on the ul, define a width for the ul, then set auto margin left and right to center, then used a clearfix so that the ul had a respected vertical height.

2
  • Couldn't you just add clear:both to the <p> inside the <ul>? So you don't need to add a clearfix <div>.
    – Derik
    Oct 8, 2012 at 3:51
  • 1
    There is no <p> element in the <ul> that I can see, and not one for sure at a position you could use to clear floats properly. While yes, you can add the clearfix to many different places, I prefer using a specific clearfix element, as do many, immediately following the floated elements in need of clearing and prior to closing it's wrapper because some browsers handle it differently, and by doing it this way you take any browser quirks out of the equation.
    – Patrick JC
    Oct 8, 2012 at 6:04
1

By wrapping your ul in a container div, it can be centered using the margin:0 auto; trick.

One way of doing it:

http://jsfiddle.net/phoffman/zpMAF/1/

0

Getting rid of the floats and changing the LI's display property to 'inline-block' will do the trick.

Also, a small amend is needed to the Facebook iframe inline style to adjust the height so that everything falls inline.

http://jsfiddle.net/amustill/Ws7kC/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.