水平对齐按钮

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

使用flexbox。添加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;