Clever Geek Handbook

Social media icons, not centering inside a div

Not sure why, but I can't get the centered icons on the page without using padding-left: 130px;

This is not ideal because the icons are not centered properly when the browser window is resized. Maybe I need more coffee, but this morning I could use some help from the stacker!

http://towerdive.net/

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 need full HTML or CSS!

+3


source to share


2 answers


You can use display: inline-block for this . Write it like this:



#social_icons ul li {
    display: inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
    padding-right: 10px;
}
+2


source


You are currently using floats to display the nav list horizontally. You cannot align list items in the middle of unordered lists due to floats.

Another method is float: left;

used instead display: inline-block;

. List items will be displayed horizontally, but any extra white space will also be counted. You will get extra margins between elements (e.g. 4px). Now you can use text-align: center;

UL to center list items.



There are a few (simple) workouts outlined in this article by Chris Coyer: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

0


source






More articles:


All Articles