表格单元格中文本的垂直定位

发布于 2024-09-05 08:22:14 字数 855 浏览 6 评论 0原文

当我在表格单元格中放置图像和文本时，文本的垂直对齐方式与相邻单元格中的文本相比会向下移动。我尝试使用 line-height CSS 属性，但它似乎没有影响。

在下面的示例中，我需要“123 Description”与“cell one”齐平。另外，默认情况下图像和“123”之间有一个空格。我该如何调整——也许是负边距？

<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        /* .adjust-text { line-height: 1.3em; } */
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>cell one</td>
                <td>
                   <img src="small-star.png" />
                   <span class="adjust-text">123 Description</span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

原文

When I place an image followed by text in a table cell, the vertical alignment of the text shifts down compared to text in adjacent cells. I tried using a line-height CSS property, but it didn't seem to have an affect.

In the following example, I need "123 Description" to be flush with "cell one." Also, there is a space between the image and "123" by default. How can I adjust that - negative margins perhaps?

<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        /* .adjust-text { line-height: 1.3em; } */
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>cell one</td>
                <td>
                   <img src="small-star.png" />
                   <span class="adjust-text">123 Description</span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沧桑㈠ 2024-09-12 08:22:14

默认情况下，图像与文本的基线对齐，这实际上将该单元格中的文本向下推。要解决这个问题，请指定：

td img { vertical-align: top; }

此处有一个很好的 CSS 垂直对齐总结。

要删除空格...删除空格：

<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>

http://jsfiddle.net/s38Uv/

By default, the image is aligned with the baseline of the text, which is in effect pushing the text in that cell down. To address this, specify:

td img { vertical-align: top; }

There's a good summary of CSS vertical-align here.

To remove the space... remove the space:

<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>

http://jsfiddle.net/s38Uv/

回复收藏 0 原文

终弃我 2024-09-12 08:22:14

要将图像与单元格对齐，请尝试将图像作为背景图像放入 css 规则中。然后使用background-position调整背景的y位置。在元素左侧添加内边距以在图像右侧显示文本。


        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        .image {
            background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
            background-position: 0 -2px;
            padding-left:20px;
        }


<span class="image">123 Description</span>

To align your image with the cell, try putting the image in a css rule as a background image. Then adjust the y position of the background using background-position. Add a padding to the left of the element to display the text to the right of the image.


        table { border-collapse: collapse; }
        td { border: thin solid; width: 10em;}
        .image {
            background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
            background-position: 0 -2px;
            padding-left:20px;
        }


<span class="image">123 Description</span>

回复收藏 0 原文

沫离伤花 2024-09-12 08:22:14

<html>
<head>
<style type="text/css">
    table { border-collapse: collapse; }
    td { border: thin solid; width: 10em;}
    td { vertical-align: baseline;}
    td img { vertical-align:  middle;}
</style>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td>cell one</td>
            <td>
               <img src="small-star.png" />
               <span style="margin: 0 0 0 -5;">123 Description</span>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

<html>
<head>
<style type="text/css">
    table { border-collapse: collapse; }
    td { border: thin solid; width: 10em;}
    td { vertical-align: baseline;}
    td img { vertical-align:  middle;}
</style>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td>cell one</td>
            <td>
               <img src="small-star.png" />
               <span style="margin: 0 0 0 -5;">123 Description</span>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

回复收藏 0 原文