如何正确对齐表格中的图标和文本？

Posted 2023-03-05

【中文标题】如何正确对齐表格中的图标和文本？

【英文标题】：How to properly align icon and text in a table?

【发布时间】：2014-08-13 22:21:28

【问题描述】：

我在尝试将图标与文本垂直对齐时遇到问题。基本上，我试图将图像图标放在<td> 标签的顶部，现在，它位于中间，如 jsfiddle 所示：http://jsfiddle.net/TheAmazingKnight/N6fLp/

我输入border:1px dotted blue; 是为了清楚地看到每个元素的间距。默认情况下，包裹img 标签的td 标签居中。如何将img标签和标题标题放在表格td标签的最顶部并与文本相邻对齐？

我试图通过输入vertical-align:text-top 来模仿结果，但这不起作用。我还尝试将position:relative 放在桌子上，然后将图像设置为top:0;，但也无济于事。我在这里错过了什么？

HTML：

<table>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" /></td>
        <td>
            <strong>Title header</strong>
            <br>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <ul class="arrowLink">
                <li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" /></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <ul class="arrowlink">
                <li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" /></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <ul class="arrowlink">
                <li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" /></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

            <p>Lorem ipsum</p>

            <ul>
                <li>Hola <a href="javascript:showNotice('#')">Google</a><br>
                    <br>
                </li>

                <li>Include completed <a href="#" target="_blank">Lorem ipsum</a></li>
            </ul>

            <p>Mail to:<br>
            Lorem Ipsum<br>
            Attn: Lorem Ipsum<br>
            1234 Main Street<br>
            NY NY 12345</p>
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" /></td>
        <td>
            <strong>Title Header</strong><br>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </td>
    </tr>
    <tr>
        <td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" /></td>
        <td>
            <strong>Title Header</strong><br>
            Lorem <a href="javascript:showNotice('#')">Lorem</a> website Lorem ipsum

            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

            <p class="small">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </td>
    </tr>
</table>

CSS：

*border:1px dotted blue;
ul,lipadding-left:15px !important;padding:0;margin:0;
/*table, tr, td, pmargin:0;padding:0;*/
imgmargin-right:10px;
imgwidth:50px;height:50px;

【参考方案1】：

要将元素垂直对齐到表格单元格的顶部，您可以使用 CSS vertical-align:top 定义。

td 
    vertical-align:top;

Documentation

Working Example

【参考方案2】：

我在你的 jsfiddle 中试过这个，我只添加了这个

td 
    padding: 6px;
    text-align: left;
    vertical-align: top;
    border-bottom:1px solid #ddd;

到css

【参考方案3】：

它通常是一种使用表格的旧样式，并且为您提供有限的功能。 如果您选择使用表格，您可以在需要的地方添加到 html 代码中：

<td valign="top"><img ... /></td>

或使用 css（这将影响所有 td）：

td 
    vertical-align:top;

如果您选择不使用表格，我建议您阅读这篇文章：

http://css-tricks.com/centering-in-the-unknown/

【参考方案4】：

<div class="wrapper">
   <td><img /></td>
   <td>Text</p>
</div>
.wrapper 
   display: flex;
   align-items: center;
   justify-content: center;