CODEWITHSUNDEEP
htmlcss
Skander Jenhani
Skander Jenhani

Reputation: 75

align text under Images

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

Upvotes: 0

Views: 182

Answers (2)

JRoss
JRoss

Reputation: 1395

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>

Upvotes: 0

goediaz
goediaz

Reputation: 652

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;">

Upvotes: 2

Related Questions