Reputation: 39044
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<a href="https://www.facebook.com/pages/Towerdive/497721103607131" title="Like us on Facebook"><img src="img/icon_facebook.png" alt="Facebook"/></a>
</li>
<li id="twitter">
<a href="https://twitter.com/TowerDiveDotNet" title="Follow us on Twitter"><img src="img/icon_twitter.png" alt="Twitter"/></a>
</li>
<li id="newsletter">
<a href="http://eepurl.com/uY5m9" title="Subscribe to our Newsletter"><img src="img/icon_newsletter.png" alt="Newsletter"/></a>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
Upvotes: 3
Views: 3776
Reputation: 6806
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left;
using display: inline-block;
. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center;
on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Upvotes: 0
Reputation: 92873
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
Upvotes: 2