水平对齐按钮

Question

我试图建立我的投资组合网站，我没有任何以前的知识，html。我试图水平对齐按钮在网页上，并希望我可以得到一些帮助，我可以如何编辑这段代码，以解决这个对齐问题。

网页

下面是代码片段：

<article>
   <header>
      <h2><a href="#">Labeling using<br />
         Weak Supervision</a>
      </h2>
   </header>
   <a href="#" class="image fit"><img src="images/Snorkel-AI.png" alt="" width =auto height =auto /></a>
   <p>Snorkel is a system for programmatically building and managing training datasets using the concept of weak supervision. This use cases demonstrates programtically labeling of text messages as spam or non-spam using snorkel.</p>
   <ul class="actions special">
      <li><a href="https://github.com/tauseef1234/Spam_Labeling_Snorkel/blob/main/SMS_Snorkel.ipynb" class="button">GitHub</a></li>
   </ul>
</article>
<article>
   <header>
      <h2><a href="#">Traffic Sign <br />
         Detection</a>
      </h2>
   </header>
   <a href="#" class="image fit"><img src="images/traffic.png" alt="" width =auto height =auto /></a>
   <p>In this project, I use TensorFlow to build a neural network to classify road signs based on an image of those signs. For this project, the German Traffic Sign Recognition Benchmark (GTSRB) dataset was used that contains thousands of images of 43 different kinds of road signs. </p>
   <ul class="actions special">
      <li><a href="https://github.com/tauseef1234/Traffic_CNN" class="button">GitHub</a></li>
   </ul>
</article>

我尝试添加额外的空格，但这需要在现有代码中进行大量的编辑。

Answer 1

用挠性盒工作。添加text-align: center使其垂直中心对齐。

​

/* Put all of the bottom code */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  display: flex;
}

section article {
  width: 50%;
  /* -------------- */
  text-align: center;
  /* ----- or ----- / */
  /*** display: flex;
  flex-direction: column;
  align-items: center ***/
  /* -------------- */
}

<section class="container"> <!-- Put this line -->
  <article>
    <header>
      <h2><a href="#">Labeling using<br />
         Weak Supervision</a>
      </h2>
    </header>
    <a href="#" class="image fit"><img src="images/Snorkel-AI.png" alt="" width=auto height=auto /></a>
    <p>Snorkel is a system for programmatically building and managing training datasets using the concept of weak supervision. This use cases demonstrates programtically labeling of text messages as spam or non-spam using snorkel.</p>
    <ul class="actions special">
      <li><a href="https://github.com/tauseef1234/Spam_Labeling_Snorkel/blob/main/SMS_Snorkel.ipynb" class="button">GitHub</a></li>
    </ul>
  </article>
  <article>
    <header>
      <h2><a href="#">Traffic Sign <br />
         Detection</a>
      </h2>
    </header>
    <a href="#" class="image fit"><img src="images/traffic.png" alt="" width=auto height=auto /></a>
    <p>In this project, I use TensorFlow to build a neural network to classify road signs based on an image of those signs. For this project, the German Traffic Sign Recognition Benchmark (GTSRB) dataset was used that contains thousands of images of 43 different
      kinds of road signs. </p>
    <ul class="actions special">
      <li><a href="https://github.com/tauseef1234/Traffic_CNN" class="button">GitHub</a></li>
    </ul>
  </article>
</section> <!-- Put this line -->

​

Answer 2

使用text-align: center;或

display:flex;
align-items:center;
justify-content:center;