Search code examples
htmlcssimagehrefcenter

HTML center text below img tag

Here is what I have -

<a href="/mi/">
    <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
    First Image 
</a>

I am using this piece of code in a loop in my templates to show a bunch of images in a grid (gallery) like fashion. I want to show a one line caption just below all the images.

I want to show "First Image" text (which is a link) right below the img tag. I thought since I am having <a> as the parent container the text should be placed below the <img> but this is not happening.

How do I show text centered right below my image?

Solution

  • This should do:

    <html>
    <head>
        <style>
            .imageLink{
                text-align:center;
            }
            .imageLink img{
                display:block;
            }
        </style>
    </head>
    <body>
        <a href="/mi/" class="imageLink">
            <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);" /> 
            First Image 
        </a>
    </body>
</html>

    Hope it helps.