I am trying to build my portfolio website and I dont have any prior knowledge of html. I am trying to align buttons horizontally on the webpage and was hoping I could get some help on how I can edit this piece of code to fix this alignment issue.

Webpage

Below is the code snippet:

<article>
                                    <header>
                                        <h2><a href="#">Labeling using<br />
                                        Weak Supervision</a></h2>
                                    </header>
                                    <a href="#" ><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 >
                                        <li><a href="https://github.com/tauseef1234/Spam_Labeling_Snorkel/blob/main/SMS_Snorkel.ipynb" >GitHub</a></li>
                                    </ul>
                                </article>
                                <article>
                                    <header>
                                        <h2><a href="#">Traffic Sign <br />
                                            Detection</a></h2>
                                    </header>
                                    <a href="#" ><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 >
                                        <li><a href="https://github.com/tauseef1234/Traffic_CNN" >GitHub</a></li>
                                    </ul>
                                </article>

I tried adding extra spaces but that required lot of editing in the existing code.

CodePudding user response：

Work with the flex-box. Add text-align: center to align them vertically centered.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  display: flex;
}

section article {
  width: 50%;
  /* -------------- */
  text-align: center;
  /* ----- or -----