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

Question

我正在尝试用 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;
}

我把你的代码变成了小提琴

Answer 2

给你。

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

表内表。