Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jason Ladieu
Jason Ladieu
10,635 Points

Trouble centering inline-block images

I'm trying to get these two social media logos to center, together, at the bottom of the page. I'm been messing around with it for a while and I can't figure out what I'm doing wrong. Can someone kindly explain?

<div id="socialmedia">
            <footer>
                <ul>
                    <li>
                        <a href="facebook.com"><img src="images/facebook.png" alt="Facbook" class="facebook"></a>
                        <a href="instagram.com"><img src="images/instagram.png" alt="Instagram" class="instagram"></a>
                    </li>                       
                </ul>
            </footer>
        </div>
    </div>    
    </body>
</html>

/**********************
***Footer***********/

#socialmedia ul li a {
    display: inline-block;
    margin: 0 auto;
}
kevinhottinger
kevinhottinger
10,569 Points

With "margin: 0 auto" you are saying give this block equal margin on both left and right sides but it needs to know the size of the content itself to calculate that.

Secondly you are trying to set this on two sibling nodes which isn't the correct approach. Instead go up the parent nodes to find an element that has full page width (the ul for example). Set a size for your block e.g. 300px and then centre it based on the remaining space.

<div id="socialmedia">
            <footer>
                <ul>
                    <li>
                        <a href="facebook.com"><img src="images/facebook.png" alt="Facbook" class="facebook"></a>
                   </li>
                   <li>
                        <a href="instagram.com"><img src="images/instagram.png" alt="Instagram" class="instagram"></a>
                    </li>                       
                </ul>
            </footer>
        </div>

#socialmedia ul {
  width: 300px;
  margin: 0 auto;
}
#socialmedia ul li {
  display: inline-block;
}

1 Answer

Raymond Tran
Raymond Tran
6,285 Points
Raymond Tran
Raymond Tran
6,285 Points 
footer { 
text-align: center;
}
Raymond Tran
Raymond Tran
6,285 Points

Try to use this code instead of yours. Let me know if it still doesn't work :)