在表结构中对齐图像下方的文本

Question

我正在尝试用HTML和HTML制作媒体库模板。 CSS，我可以在其中添加图像到表。我希望在图像下面直接添加一个标题。

但我的输出目前是错误的。我明白了：

文字对齐错误，我无法找到一种方法将文字直接放在图像下面并居中。

这是我的代码模板：

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

我的CSS是：

.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;
}

任何人都可以帮忙解决这个问题吗？

Answer 1

所有归功于Zoltan Toth提供的答案，删除

.tile_p{
    display: inline;
}

我将您的代码转换为fiddle

Answer 2

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

Answer 3

只是为了清理，问题是在主要评论中关闭@ZoltanToth提到的div标签。

以下代码可以工作并创建我想要的输出：

<强> 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;
}

感谢您的投入。谢谢C.

Answer 4

<?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>';
?>

表格中的表格。