ansaurus

Question

Vertical positioning of text in table cell

Answer 1

A:

Have you tried a classic vertical-align:middle? Else put the image in it's own cell or leave the alignment at default and change the padding-bottom of all your cells will also give you the same thing.

edl 2010-06-09 17:51:08

This won't work, look at how his example renders to see what he is talking about.

Andrew 2010-06-09 17:52:16

Um yeah. I don't see a link anywhere to see how it 'renders' so to speak. Where you got a full path to his image I have no idea...

edl 2010-06-09 17:56:01

He had it in his original post: http://jsfiddle.net/s38Uv/

Andrew 2010-06-09 17:58:40

Answer 2

+2 A:

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/

Andrew 2010-06-09 17:51:22

Answer 3

A:

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>

Calvin L 2010-06-09 17:55:31

Answer 4

A:

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

Chinjoo 2010-06-09 18:10:45

ansaurus

tags:

views:

answers:

Vertical positioning of text in table cell

related questions