将包含多个图像的div居中于另一个div中

Question

我试图将包含四个接触图像的div居中于另一个div中时遇到问题。以下是我的HTML代码：

<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>

CSS就是

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;
}

我该怎么做才能解决这个问题？谢谢。

Answer 1

如果这不是您想要实现的目标，请告诉我。你的问题有点模糊，但这就是我从中得到的。

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>

Answer 2

div已经居中了。

使用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>

Answer 3

尝试使用像这样的flaxbox布局：

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>