1

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

一张桌子

每个表格单元格内都有三个部分

将图像下方两个对象括起来的超链接 - 在表格单元格底部的表格单元格文本中垂直和水平居中对齐

<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">？

4

3 回答 3

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元素是为这种情况精确添加的，尽管这里所需的样式有点古怪。

于 2019-03-11T00:29:37.320 回答
0

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 文件，您也可以<style>在 HTML 之前添加一个块，这比内联样式更好：

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

小提琴：http: //jsfiddle.net/xeTPx/2/

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

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

于 2013-08-13T14:07:29.660 回答
0

我建议将 img 和 text 从相同的对齐结构中分离出来。我认为您可以设法使 img 居中，但文本会破坏这种对齐方式。我使用的技巧是位置>相对于父级和位置>绝对于子级。干得好：

<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 不再处于相同的对齐结构中。我希望这能解决你的问题。

于 2019-03-10T08:17:50.610 回答