CODEWITHSUNDEEP
cssimagehtml-table
cwiggo
cwiggo

Reputation: 2609

Align text underneath image within table structure

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:

enter image description here

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?

Upvotes: 3

Views: 5011

Answers (4)

cwiggo
cwiggo

Reputation: 2609

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.

Upvotes: 1

jamesplease
jamesplease

Reputation: 12879

Here you go.

html

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

css

.tile_table{
  border-collapse:collapse;
}

.tile_table td {
  text-align: center;
}

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

Upvotes: 2

Pankrates
Pankrates

Reputation: 3095

All credit to Zoltan Toth for providing the answer, remove the

.tile_p{
    display: inline;
}

I converted your code into a fiddle

Upvotes: 3

Matosha
Matosha

Reputation: 116

<?php
echo '<div align="center" class="tile_div">';
echo '<table class="tile_table">';
echo "<tr>";
for($i=0;$i<4;$i++){
echo "<td><table><tr><td>";
echo '<img class="tile_image" height="60px" width="60px" src="default.jpg"/></td></tr>'; 
echo '<tr><td><p class="tile_p">Sound</p></td></tr></table>';
echo "</td>";
 }
echo "</tr>";
echo '</table>';
echo '</div>';
?>

Table inside a table.

Upvotes: 0

Related Questions