Home/ Questions/Q 848971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T07:01:38+00:00

When I place an image followed by text in a table cell, the vertical

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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