将图片放在 table 的中心，如果有额外的文字，图片下方的文字应换行

Question

我希望图像以 table 标记为中心，文本在溢出时换行。

在 table 标签中，我怎样才能将图片放在 table 的中央，并在并排的图片下方放置文字。

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

我只能使用内联css，不能使用其他标签，如div。我也不能使用位置属性。因为我正在制作 HTML 电子邮件。必须坚持 table 标签。

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

如代码片段所示，我希望在下一行显示额外的文本，并在 table 的中心显示图像。

Answer 1

试试这个：

<table style="margin: 0 auto; border: thin green solid;" width="600">
<tr>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" 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" width="110" height="110" 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" width="110" height="110" 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" width="110" height="110" 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>

重要的是，您为 table 单元格指定了上面一行中图像的宽度。

将图片放在 table 的中心，如果有额外的文字，图片下方的文字应换行

put images in the center of table and text below image should be in new line if extra text is there

html

css

html-table

center

display