将包含多个图像的 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

尝试像这样使用 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>

Answer 2

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

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 3

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>

将包含多个图像的 div 居中放置在另一个 div 中

Centering a div containing multiple images inside another div

html

css

centering