Question

I am trying to make a media library template in HTML & CSS, where I can add images to a table. I wish to add a caption directly underneath the images.

But my output is currently wrong. I get:

The text is aligned wrong, I cannot find a way to get the text directly under and centered underneath the image.

Here is my code template:

<div align="center" class="tile_div">
<table class="tile_table">
<tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
</tr>
</table>

My CSS is:

.tile_div{
    text-align: center;
    width: 100%;
}

.tile_table{
    border-collapse:collapse;
}

.tile_table tr, td{
}

.tile_image{
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

.tile_p{
    display: inline;
}

Can anyone help with a solution to this problem?

Answer 1

just to clear up, the problem was closing the div tag metioned by @ZoltanToth in the main comments.

Here is the code that works and creates my desired output:

HTML:

        <div align="center" class="tile_div">
            <table class="tile_table">
                <tr>
                    <td>
                        <img class="tile_image" height="100px" width="100px" src="default.jpg"/> 
                        <p class="tile_p">Sound</p>
                    </td>
                    <td>
                        <img class="tile_image" height="100px" width="100px" src="default.jpg"/> 
                        <p class="tile_p">Sound</p>
                    </td>
                    <td>
                        <img class="tile_image" height="100px" width="100px" src="default.jpg"/> 
                        <p class="tile_p">Sound</p>
                    </td>
                </tr>
            </table>
        </div>

CSS :

.tile_div{
    text-align: center;
    width: 100%;
}

.tile_table{
    border-collapse:collapse;
}

.tile_table tr, td{
  text-align: center;
}

.tile_image{
    padding: 3px 5px 0px 3px;
    margin: 5px 5px 0px 5px;
}

.tile_p{
    line-height: 0px;
}

Thanks for your input. Thanks C.