Question

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

我让border:1px dotted blue;清楚地看到每个元素的间距。默认情况下，包装td标记的img标记位于中心位置。如何将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" alt="img.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" alt="img.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" alt="img.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" alt="img.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" alt="img.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" alt="img.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,li{padding-left:15px !important;padding:0;margin:0;}
/*table, tr, td, p{margin:0;padding:0;}*/
img{margin-right:10px;}
img{width:50px;height:50px;}

Answer 1

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

td {
    vertical-align:top;
}

Documentation

Working Example

Answer 2

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

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

到css

Answer 3

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

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

或使用css（这会影响所有td＆＃39;）

td {
    vertical-align:top;
}

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

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

Answer 4

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

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

4 个答案: