将图像放在表格的中心，如果有额外的文字，图像下方的文字应该在新行中

Posted 2023-03-29

【中文标题】将图像放在表格的中心，如果有额外的文字，图像下方的文字应该在新行中

【英文标题】：put images in the center of table and text below image should be in new line if extra text is there

【发布时间】：2017-01-01 12:52:49

【问题描述】：

如果溢出，我希望图像以表格标签为中心，文本在新行中。

在表格标签中，如何将图像放在表格的中心，将文本放在并排的图像下方。

我想要一张图片，下面应该有一些文字。但是当文本溢出时，剩余的文本应该在新行中。

我只能使用inline css，不能使用div等其他标签。我也不能使用位置属性。因为我正在制作 html 电子邮件。必须坚持使用表格标签。

<table style="margin: 0 auto; border: thin green solid;" >
    <tr>
        <td style="margin:0; padding: 0;" align="center">
            <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
            <p>Some Text</p>
        </td>

        <td style="margin:0; padding: 0;" align="center">
            <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
            <p>Some Text</p>
        </td>

        <td style="margin:0; padding: 0;" align="center">
            <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
            <p>Some Text Some TextSome TextSome TextSome TextSome Text</p>
        </td>

        <td style="margin:0; padding: 0;" align="center">
            <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
            <p>Some Text</p>
        </td>
    </tr>
</table>

如代码 sn-p 中所示，我希望在下一行显示额外的文本，并在表格的中心显示图像。

【参考方案1】：

试试这个：

<table style="margin: 0 auto; border: thin green solid;" >
<tr>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"   style="display: block; margin: 0 auto;"> 
    </td>
</tr>
<tr>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text Some TextSome TextSome TextSome TextSome TextSome Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
</tr>

重要的是您为表格单元格分配上一行中图像的宽度。

【讨论】：

它就在那里。但它超出了 td 的宽度。所以我要修复的那件事。并且当文本溢出时，图像会上升，而文本应该下降。

好的，明白了。但是如何你想修复它？单元格应该变宽还是应该隐藏溢出的文本？如果不知道您想要实现什么行为，我无法真正回答这个问题。请添加。

溢出文本应该向下。没有隐藏。

我希望图像位于表格的中心，图像下方的文本应该居中对齐，如果文本大于 td 的宽度，那么接下来应该有额外的文本线对齐为中心

已经是这样了，所以我真的不明白问题出在哪里。