html - 我需要帮助对齐页面中央的图像链接

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

实际上你可以使用 inline-block 来实现.

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