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.)
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