我需要帮助对齐页面中心的图像链接。

Question

我想对齐图片链接到页面的中心。这就是我迄今尝试过的：

HTML:

<section id="Contact">
  <h1 class="other-section">Contact</h1>
  <div class="contact-links">
    <a id="profile-link" href="https://facebook.com/" target="_blank">
     <img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
    </a>
    <a id="profile-link" href="https://github.com/jadenadams329" target="_blank">
       <img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
     </a>
    <a id="profile-link" href="https://instagram.com" target="_blank">
       <img src="https://image.flaticon.com/icons/svg/87/87390.svg" /> 
    </a>
  </div>
</section>
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

CSS:

#Contact {
    margin:0 auto;
    padding:3em 0 0 0;
    min-height:100vh;
    background-color: var(--contact-bg);
  }

.other-section{
    font-size: 30pt;
    text-align:center;
    color: #EDF5E1;
    margin-bottom: 10px;
 }
.contact-links{
      text-align: center;

    }
    #profile-link img{
      width: 50px;

    }

我不能为了我的生活，让他们停留在页面的中间，在接触下均匀地间隔。

Answer 1

实际上，您可以使用内嵌块实现这一点。

​

:root{--contact-bg: white}
#Contact {
    margin:0 auto;
    padding:3em 0 0 0;
    min-height:100vh;
    background-color: var(--contact-bg);
  }

.other-section{
    font-size: 30pt;
    text-align:center;
    color: #EDF5E1;
    margin-bottom: 10px;
 }
.contact-links{
      text-align: center; 
    }
    .profile-link{
      display: inline-block;/*just add this*/
    }
    .profile-link img{
      width: 50px;

    }

<section id="Contact">
  <h1 class="other-section">Contact</h1>
  <div class="contact-links">
    <a class="profile-link" href="https://facebook.com/" target="_blank">
     <img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
    </a>
    <a class="profile-link" href="https://github.com/jadenadams329" target="_blank">
       <img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
     </a>
    <a class="profile-link" href="https://instagram.com" target="_blank">
       <img src="https://image.flaticon.com/icons/svg/87/87390.svg" /> 
    </a>
  </div>
</section> 

​