Centering a div containing multiple images inside another div

Question

I am having problems trying to center a div containing four contact images inside of another div. The following is my HTML code for it:

<div id="contact" class="infoSection">
    <div id="centeredConctact">
        <!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/facebook.png" alt="Facebook"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/instagram.png" alt="Instagram"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/twitter.png" alt="Twitter"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/snapchat.png" alt="Snapchat"></img></a>
    </div>
</div>

And the CSS is

div#contact {
    border: 1px solid red;
}

div#centeredConctact {
    margin: 0 auto;
    width: 50%;
}

img.contactImg {
    width:50px;
    height:50px;
    display: inline-block;
    margin: 0 auto;
}

div.infoSection {
    margin-top: 15px;
    padding: 0;
    width: 60%;
    min-width: 600px;
}

What could I do to fix this? Thank you.

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Temani Afif, Dec 27 '17 at 21:37
https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — Temani Afif, Dec 27 '17 at 21:38
first you need to correct your code .. we don't use image tag like this — Temani Afif, Dec 27 '17 at 21:47

Darren · Accepted Answer · 2017-12-27T21:49:54.840

Let me know if this is not what you are trying to achieve. Your question was a little vague but this is what I took from it.

div#contact {
  border: 1px solid red;
  width: 100%;
}

div#centeredConctact {
  text-align: center;
}

img.contactImg {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin:4px 1px 1px;
}
a.contactImg {
  text-decoration:none;
}

div.infoSection {
  margin-top: 15px;
  padding: 0;
}

<div id="contact" class="infoSection">
  <div id="centeredConctact">
    <!--<img class="contactImg" src="images/email.png" alt="Email">-->
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=F" alt="Facebook"></a>
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=I" alt="Instagram"></a>
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=T" alt="Twitter"></a>
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=S" alt="Snapchat"></a>
  </div>
</div>

This worked, I just really wished HTML was more consistent and didn't expect us to use text-align to center images. Thank you. — George, Dec 27 '17 at 21:46
I missed that from the copy. @George just remove `` from the code. — Darren, Dec 27 '17 at 21:50

score 1 · Answer 2 · answered Dec 27 '17 at 21:47

The div is already centered.

Center the images (respectively the links) with text-algin: center.

div#contact {
  border: 1px solid red;
}

div#centeredConctact {
  margin: 0 auto;
  width: 50%;
  border: 1px solid;
  text-align: center;
}

img.contactImg {
  width: 50px;
  height: 50px;
  display: inline-block;
}

div.infoSection {
  margin-top: 15px;
  padding: 0;
  width: 60%;
  min-width: 600px;
}

<div id="contact" class="infoSection">
  <div id="centeredConctact">
    <!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/facebook.png" alt="Facebook">
    </a>
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/instagram.png" alt="Instagram">
    </a>
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/twitter.png" alt="Twitter">
    </a>
    <a href="" rel="noopener noreferrer"><img class="contactImg" src="images/snapchat.png" alt="Snapchat">
    </a>
  </div>
</div>

valek · Answer 3 · 2017-12-27T21:45:47.820

Try using flaxbox layout like this:

div#contact {
  border: 1px solid red;
  display: flex;
  justify-content: center
}

img.contactImg {
  width: 50px;
  height: 50px;
  margin: 3px 1px 0;
}

div.infoSection {
  margin-top: 15px;
  padding: 0;
  width: 60%;
  min-width: 600px;
}

<div id="contact" class="infoSection">
    <div id="centeredConctact">
        <!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50" alt="Facebook"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50" alt="Instagram"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50" alt="Twitter"></img></a>
        <a href="" rel="noopener noreferrer"><img class="contactImg" src="http://placehold.it/50x50" alt="Snapchat"></img></a>
    </div>
</div>

read the question again please :) it's not about saying if there is a need or not ... the OP said : *centering a div inside a div* so by removing the a div you made a complete new code and no relevant with the OP — Temani Afif, Dec 27 '17 at 21:43
@TemaniAfif You are right, my mistake. I've updated the answer. — valek, Dec 27 '17 at 21:46

Centering a div containing multiple images inside another div

3 Answers3