CODEWITHSUNDEEP
htmlcssfacebook-likegoogle-plus-one
XåpplI'-I0llwlg'I -
XåpplI'-I0llwlg'I -

Reputation: 22404

How to center Facebook/G+/Twitter "like" buttons on page?

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.

Upvotes: 1

Views: 2853

Answers (3)

phoffman
phoffman

Reputation: 187

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/

Upvotes: 1

amustill
amustill

Reputation: 5302

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/

Upvotes: 0

Patrick JC
Patrick JC

Reputation: 307

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.

Upvotes: 3

Related Questions