Centering a Row of Inline Images

Question

I have four icons I've set to display inline and I'm now trying to center the list they're contained in within a div.

Here's the HTML:

<div id="social_media">
     <ul>
           <li><a href="http://wwww.facebook.com"><img src="../images/social_media_icons/facebook_icon.png"></a></li>
           <li><a href="http://wwww.wikia.com"><img src="../images/social_media_icons/wikia_icon.png"></a></li>
           <li><a href="#"><img src="../images/social_media_icons/rss_icon.png"></a></li>
           <li><a href="#"><img src="../images/social_media_icons/mail_icon.png"></a></li>
     </ul>
</div>

And the CSS:

 #social_media
{
    width:220px;
    margin:10px auto;
    padding:0 2px;
}

#social_media ul li 
{
    display:inline;
    margin:0 3px;
    list-style-type:none;
}

The four icons are 48px square for a total of 192px wide, and each have horizontal margins of 3px for another 24px wide, adding to the whole list being 216px wide. The div they're contained in (social_media) is 220px wide with 2px of horizontal padding for 216px of space in which the list, in theory, should fit perfectly.

However, when I actually do this, the fourth icon gets bumped down to the next row, directly under the first. When I change 3px to auto, they all fit on the same row, but are too close together. And regardless of what I do, the list is aligned to the left instead of the center where it's supposed to be.

Help?

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Given the CSS you posted, you may have forgotten about the default padding on the ul element. In most browsers, it is 40px. Resetting this value, however, doesn't solve the entire issue, as the real issue lies in the fact that inline elements respect the whitespace in the markup and generate ~2px spaces when present. This is the root of the issue; i'd therefore suggest taking a look at this answer, which addresses this issue specifically.

Given that there isn't any text involved, you could set font-size:0 on the parent ul element, thus removing this space. Assuming there actually is text, you would simply specify a new font-size on the child elements affected.

EXAMPLE HERE

#social_media ul {
    padding:0;
    font-size:0;
}

Alternatively, the best approach would be to actually remove the whitespace from the markup. Take a look at the markup in this example.

edited May 23 '17 at 10:31

Community

1
1

answered Jan 26 '14 at 20:53

Josh Crozier

233,099
56
391
304

Margin and padding were reset at the top of the page ;) I tried removing the whitespace both through your method and commenting it out, and while both successfully reduced space between the icons to zero, I now can't get it to recognize the 3px margins (or 3px padding when I tried that). It _does_, however, appear to be recognizing the 2px padding on the div. – Zach Cox Jan 26 '14 at 21:32
Nope, just arranges them vertically again :\ I wonder, could it have something to do with the fact that I'm using .png images? They have rounded (i.e. transparent) corners, but the sides take up the full 48x48. – Zach Cox Jan 26 '14 at 21:43
@ZachCox Do you have an example where I can see this? A url or something? This doesn't really seem to be the case in the examples I posted; there is still a `3px` margin between the items. – Josh Crozier Jan 26 '14 at 21:45
Alright, i just added the "img" back in after ui li, and that seemed to get it to recognize the margins, though they're still arranged vertically in both inline and inline-block. – Zach Cox Jan 26 '14 at 21:45
Unfortunately not, this is currently being developed offline. I can take a screenshot, though, give me one second. – Zach Cox Jan 26 '14 at 21:46
@ZachCox To be honest, a screenshot probably wouldn't help; is there any chance you could made a [jsFiddle example](http://jsfiddle.net/) i'd be able to figure out the issue if you did that – Josh Crozier Jan 26 '14 at 21:47
@ZachCox The selector was wrong, you were making the `img` elements `inline-block`; it should have been the `li` items. [Updated example](http://jsfiddle.net/ksg8D/) – Josh Crozier Jan 26 '14 at 22:04
Here, have a look at this: http://jsfiddle.net/Dense_Electric/4j6fA/ I've given the div a temporary green background for clarity. – Zach Cox Jan 26 '14 at 22:05
AH, that was my problem! I didn't realize I needed separate #social_media ul li and @social_medial ul li img sections. I set it back to default inline and it worked *almost* perfectly fine. It still isn't *quite* lining up in the perfect center, but I think I can fix that on my own (and if not, it's close enough that it doesn't really matter). – Zach Cox Jan 26 '14 at 22:09
@ZachCox You would change the width of `#social_media` to `216px` as opposed to `220px`. [Updated example](http://jsfiddle.net/L44h2/) – Josh Crozier Jan 26 '14 at 22:11
1

And adding text_align:center to #social_media ul li fixed that little problem. My entire issue has been resolved, much appreciated! – Zach Cox Jan 26 '14 at 22:12

score 0 · Answer 2 · edited Jan 26 '14 at 20:51

0

Try

#social_media ul li img {
  padding: 3px;
}

edited Jan 26 '14 at 20:51

Musa

96,336
17
118
137

answered Jan 26 '14 at 20:49

Thrash Bean

658
4
7

Well that certainly did _something_, but they're arranged vertically as if in a block. Also, they now all have standard bullets again. – Zach Cox Jan 26 '14 at 20:54
Increase #social_media width, must help to get them in a row. – Thrash Bean Jan 26 '14 at 20:57

Centering a Row of Inline Images

2 Answers2