新手搭建HTML作品集网站：如何实现按钮水平对齐？

我正在搭建个人作品集网站，但没有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>

解决方法 #

不用手动添加空格，直接通过CSS控制布局即可，以下是两种简单易操作的方案：

方案一：文本居中对齐

在页面的<head>标签内添加<style>块，或者找到现有CSS代码区域，加入以下样式：

ul.actions.special {
  text-align: center;
  padding-left: 0; /* 移除列表默认左内边距 */
  list-style: none; /* 移除列表默认项目符号 */
}

方案二：Flex布局对齐

同样在CSS区域添加以下代码：

ul.actions.special {
  display: flex;
  justify-content: center; /* 实现按钮水平居中 */
  padding-left: 0;
  list-style: none;
  gap: 10px; /* 后续添加多个按钮时，可设置按钮间的间距 */
}

这两种方案都无需修改大量HTML代码，仅需添加几行CSS就能让所有ul.actions.special容器内的按钮实现水平对齐。

内容的提问来源于stack exchange，提问作者user15229524