【问题标题】：Align text underneath image within table structure在表格结构中对齐图像下方的文本
【发布时间】：2012-12-24 04:02:21
【问题描述】：

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

谁能帮忙解决这个问题？

【问题讨论】：

彻底删除.tile_p{ display: inline; }就可以了
+1 表示似乎是正确的解决方案，-1 表示未将其作为答案
由于这与 PHP 无关，最好只显示您的 HTML。
当我删除 .tile_p 它给了我this
它的行为不应该那样......可能是因为你的 HTML 中有语法错误 - echo '<div align="center" class="tile_div"'; 中缺少 >

标签： css image html-table

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

表中的表。

【讨论】：

【解决方案3】：

感谢 Zoltan Toth 提供的答案，删除

.tile_p{
    display: inline;
}

我将您的代码转换为fiddle

【讨论】：

【解决方案4】：

为了澄清，问题是关闭主 cmets 中 @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.

【讨论】：