CODEWITHSUNDEEP
htmlcsscentering
George
George

Reputation: 124

Centering a div containing multiple images inside another div

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.

Upvotes: 0

Views: 43

Answers (3)

Darren
Darren

Reputation: 2290

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>

Upvotes: 1

user3589620
user3589620

Reputation:

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>

Upvotes: 1

valek
valek

Reputation: 1376

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>

Upvotes: -1

Related Questions