align text under Images - html

Question

I have 2 Images as a link In my HTML page and I want to insert text under each image in the <a> tag to be clickable, So I tried this code :
<div align="center" style="margin-top: 150px;">
<a href="shortcode.php" style="padding-right: 50px;">
<img src="img\logo_sh.gif" width="300" height="300"/>
<p> Some text </p></a>
<a href="workorder.php" style="padding-left: 50px;">
<img src="img\logo_wo.gif" width="300" height="300"/>
<p> another text </p></a>
</div>
But I get a style issue like this Image and I want them to be in the center like this Image

Answer 1

Try adding this CSS to your container:
#img_container {
display: flex;
flex-direction: row;
}
I highly recommend you to read this guide about Flexbox. It will
help you to understand Flexbox and it will avoid several headaches
while centering DOM elements.
Here is a working snippet.
#img_container {
display: flex;
flex-direction: row;
}
<div align="center" id="img_container" style="margin-top: 150px;">
<a href="shortcode.php" style="padding-right: 50px;">
<img src="img\logo_sh.gif" width="300" height="300" id="shortcode_icon" />
<p> Some text </p></a>
<a href="workorder.php" style="padding-left: 50px;">
<img src="img\logo_wo.gif" width="300" height="300" id="workorder_icon" />
<p> another text </p></a>
</div>
EDIT: You can also add it as inline style.
<div align="center" id="img_container" style="margin-top: 150px; display: flex; flex-direction: row;">

Answer 2

You can also use flexbox on the anchors to center the content within.
#img_container {
margin-top:150px;
}
#img_container a {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<div align="center" id="img_container" style="margin-top: 150px;">
<a href="#link">
<img src="https://picsum.photos/300/300" id="shortcode_icon" />
<p> Some text </p>
</a>
<a href="#link">
<img src="https://picsum.photos/300/300" id="workorder_icon" />
<p> another text </p>
</a>
<a href="#link">
<img src="https://picsum.photos/300/300" id="workorder_icon" />
<p> another text that is a litte longer. </p>
</a>
</div>