[Solved] Trouble centering <ul> with images

[chris_s]

I didn’t give my #social <div> a width! Maybe this will help someone else out in the future.

Hey all, first post here and a bit of a beginner. I am trying to make a simple splash page for a parked site and I’m have a little trouble getting my Facebook and Twitter images to center. I believe most of my markup is correct, but I am not too sure. Hopefully someone can help out. Here is what I currently have. (I have searched google and css-tricks but did not find anything to help my exact problem.)

Code:

• Facebook
• Twitter

And here is the CSS. I am trying to get the images to flow with the page and not stay fixed.

Code:

#social {
width: auto;
position: relative;
padding-top: 100px;

}

#social ul {
margin: auto;
overflow: hidden;
}

#social ul li {
text-align: center;
float:left;
margin-left: 0;
margin-right:25px;
list-style-type: none;

}

#social ul li img {
display: block;
margin: 0 auto;
border: none;

}

#social ul li a {
text-decoration: none;

}

edit – I did notice that if I add

Code:

#social ul { display: inline }

and remove

Code:

#social ul li { float: left }

it does what I want, but they are on top of each other, not next to one another. Which is what I want.

-Chris

[Author]

Posts