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>

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

1 个答案: