Вертикальное расположение текста в ячейке таблицы - PullRequest
Новая
       2

Вертикальное расположение текста в ячейке таблицы

2 голосов
/ 09 июня 2010

Когда я помещаю изображение, за которым следует текст, в ячейку таблицы, вертикальное выравнивание текста смещается вниз по сравнению с текстом в соседних ячейках. Я попытался использовать свойство 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>

Ответы [ 4 ]

5 голосов
/ 09 июня 2010

По умолчанию изображение выравнивается по базовой линии текста, что фактически приводит к выталкиванию текста в этой ячейке вниз.Чтобы решить эту проблему, укажите: 

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/

0 голосов
/ 09 июня 2010 
<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 голосов
/ 09 июня 2010

Чтобы выровнять свое изображение по ячейке, попробуйте поместить изображение в правило CSS в качестве фонового изображения.Затем отрегулируйте положение y фона, используя background-position.Добавьте отступ слева от элемента, чтобы отобразить текст справа от изображения. 


        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 голосов
/ 09 июня 2010

Вы пробовали классический vertical-align:middle? В противном случае поместите изображение в собственную ячейку или оставьте выравнивание по умолчанию и измените нижний отступ всех ваших ячеек, что также даст вам то же самое.

...