CSS表格单元格，在中间有图像，然后在单元格底部有文本

Question

由于我在一个免费的wordpress.com博客上，我一直在努力寻找使用CSS内联样式的简单解决方案。

一张表

每个表格单元格内都有一个由三部分组成的

包含下面两个对象的超链接image-在表格单元格中垂直和水平居中对齐表格单元格底部的文本

<psedo markup>
<td>
  <a href="#">
   <img style="vertical-align:middle" src="" />
   <p style="vertical-align:bottom">Text at the bottom</p>
  </a>

但似乎无法得到一致的结果，我用<div style="display:block">更好吗？

Answer 1

如果可以使用html5，请使用figure:

<td>
    <a href="http://gravatar.com">
        <figure style="text-align: center;">
             <img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&amp;d=identicon&amp;r=PG&amp;f=1" 
                  alt="" width="32" height="32">
             <figcaption>gravatar glyph</figcaption>
        </figure>
    </a>
</td>

figure元素正是为这种情况添加的，尽管这里需要的样式有点古怪。

Answer 2

HTML:

<table>
    <tr>
        <td style="text-align: center;"> 
            <a>link</a>
            <img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
            <p>Bacon... Bacon... Bacon...</p>
        </td>
    </tr>
</table>

即使你不能添加CSS文件，你也可以在HTML之前添加<style>块，这将比内联样式更好：

<style>
    td {
        text-align: center;
    }
    td img {
        display: block;
        margin: 0 auto;  
    }
</style>

Fiddle：http://jsfiddle.net/xeTPx/2/

请不要使用表格进行布局（即非表格数据-不确定是否如此），还有其他方法可以在没有臃肿标记和可访问性问题的情况下使用类似的布局。display: flex通常是一个不错的选择，因为它现在在当今的许多浏览器中都有支持。有时，甚至使用CSS display: table和display: table-cell的其他标记也是另一种选择。

这可能是对vertical-align的一个很好的解读：http://css-tricks.com/what-is-vertical-align/

Answer 3

我建议将img和文本从同一对齐结构中分离出来。我认为你可以设法使img居中，但文本破坏了这种对齐方式。我使用的技巧是相对于父对象的position>和相对于子对象的position>absolute。给你：

<td>
    <a href="#" style='**position:relative;**'>
        <img style="vertical-align:middle" src="" />
        <p style="**position:absolute; bottom:0;**">Text at the bottom</p>
    </a>
</td>

通过这样做，p不再处于同一排列结构中。我希望这能解决你的问题。