Centering three images within a div

Question

So I'm making a little website to market an application I'm going to create. I'd like to have three social media icons at the bottom of the screen, aligned to the middle of the screen, horizontally.

I've put the three icons inside a div and no matter how much I try, I can't figure out how to align this properly!

Please note, I began using HTML and CSS today, so excuse my extremely horrible code.

<div style="text-align:middle">
    <ul style="white-space:nowrap; display:inline; list-style:none;">
        <li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
            <img src="images/custom/facebook.png" height="60"></img></li>
        <li style="white-space:nowrap; display:inline; list-style:none; text-align:center;">
            <img src="images/custom/twitter.png" height="60"></img></li>
        <li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
            <img src="images/custom/gmail.png" height="60"></img></li> 
    </ul>
</div>

Any help is appreciated.

Thank you,

David

score 2 · Answer 1 · answered Oct 03 '17 at 17:32

2

You need to use text-align:center:

<div style="text-align:center">
    <ul style="white-space:nowrap; display:inline; list-style:none;">
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="http://placehold.it/60" height="60" /></li>
        <li style="white-space:nowrap; display:inline; list-style:none; text-
            align:center;">
            <img src="http://placehold.it/60" height="60" /></li>
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="http://placehold.it/60" height="60" /></li> 
    </ul>
</div>

answered Oct 03 '17 at 17:32

Stuart

6,630
2
24
40

Thanks for the fast reply. Unfortunately this didn't work for me, the images are offset ever so slightly to the right. Even when I run the code snippet on Stack Overflow, the images are positioned in the same way. – David Bryce Oct 03 '17 at 17:35
It must have something to do with the code around. Use the element inspector to try and find what is creating this offset, like a padding or margin. – ichigolas Oct 03 '17 at 17:39
`
– showdev Oct 03 '17 at 17:59

score 2 · Answer 2 · answered Oct 03 '17 at 17:35

I would use flex boxes to center your div. It's a more modern solution that also scales nicely if you want to play around with your flex-items.

<div style="display: flex; justify-content: center;">
    <ul style="white-space:nowrap; display:inline; list-style:none;">
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="images/custom/facebook.png" height="60"></li>
        <li style="white-space:nowrap; display:inline; list-style:none; text-
            align:center;">
            <img src="images/custom/twitter.png" height="60"></li>
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="images/custom/gmail.png" height="60"></li> 
    </ul>
</div>

You can learn more about flex boxes here. Alternatively if you're more of a gamer there's an interactive tutorial here.

score 1 · Accepted Answer · answered Oct 03 '17 at 17:39

1

First, separate your html and css. Second, I doubt that you need the ul and li's. Here's the html:

<div class="social">
    <img src="images/custom/facebook.png" class="social-icon">
    <img src="images/custom/twitter.png" class="social-icon">
    <img src="images/custom/gmail.png" class="social-icon">
</div>

Then, the css:

.social {
    text-align: center; //not middle
}

.social-icon {
    height: 60px;
    padding: 20px;  // your choice here
    float: left;
}

Even better would be to use the flex property in css:

.social {
    display: flex;
    padding: 10px; // your choice here
}

.social-icon {
    flex: 1 0 30%; // experiment with the last value
    padding: 20px; // your choice here as well
}

answered Oct 03 '17 at 17:39

Anthony Watson

108
1
9

This worked perfectly, thanks! Definitely going to look into flex, it seems pretty useful. – David Bryce Oct 03 '17 at 17:43
You bring up a great point with `align-items: flex-end;` and I'm going to upvote it. That is one of my favorite flexbox features, But, he didn't ask for it to be aligned to the bottom, just appearing at the bottom. From his post: "three social media icons at the bottom of the screen, aligned to the middle of the screen, horizontally." – Anthony Watson Oct 03 '17 at 18:10

VXp · Answer 4 · 2018-06-10T08:53:56.650

You can do it with the Flexbox:

* {margin: 0; padding: 0; box-sizing: border-box}

ul {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  background: Lavender;
}

ul, li {
  white-space: nowrap;
}

ul li {
  list-style: none;
  padding: 30px;
}

img {
  height: 60px;
}

<div>
  <ul>
    <li>
      <img src="http://placehold.it/60x60" alt="">
    </li>
    <li>
      <img src="http://placehold.it/60x60" alt="">
    </li>
    <li>
      <img src="http://placehold.it/60x60" alt="">
    </li> 
  </ul>
</div>

Centering three images within a div

4 Answers4