How to place text over an image using HTML/CSS?

[Alex Dunlop]

I have pairs of images and their related texts in my web application. My images are small rounded photos that the user can click on each of them to enter a new page. I want to place their specified texts at the center of those thumbnails. I wrote these codes:

    Information System
    #main-image{
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            max-height: auto;
        }
        b{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: blue;
        }
        .sub-image{
            border-radius: 5%;
        }
        .container{
            position: relative;
            text-align: center;
        }


    


    

        ![Intro](Images/IT.jpg)

---

        ![](Images/repair.jpg)
        

            **Failures**
        

    

    

        ![](Images/Equipment.jpg)
        

            **Equipments**

Please help me.

[Member_15298656]

Hey you have to write these css code to make text appear over the image and center .

.image-text{position:absolute; top:50%; left:0; width:100%; z-index:10; text-align:center; transform:translateY(-50%);}

You can keep you css as it is.. just paste above css and your text will be over and center. let me know if it work for you.

[Alex Dunlop]

Thanks

[Member_15298656]

Welcome :) let me know if any problem, thanks Regards Backlinkyourwebsite

[Alex Dunlop]

Thanks.