Как выровнять изображение и текст по вертикали внутри элемента TD? - PullRequest
Новая
       20

Как выровнять изображение и текст по вертикали внутри элемента TD?

15 голосов
/ 15 января 2009 
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

Вот как это выглядит:


(источник: garethjmsaunders.co.uk )
Мой канал

Значок и текст смещены по вертикали. Значок вверху ячейки таблицы, текст внизу. И текст, и значок занимают 16 пикселей, но ячейка все еще занимает 19 пикселей. Как их выровнять, чтобы сохранить эти 3 пикселя?

Ответы [ 9 ]

18 голосов
/ 15 января 2009

Ну, если вы выберете метод фонового изображения, то это очень просто: 

background: url(feed.png) left center no-repeat
9 голосов
/ 15 января 2009

Изображение выравнивается по базовой строке текста, это не включает высоту спуска, которая является «галочкой» в букве, такой как g или y.

Если высота строки / ячейки должна быть фиксированной, вы можете добавить высоту строки, чтобы получить ее по центру по вертикали. Например, предположим, что ваша ячейка имеет высоту 16 пикселей: 

td.feed {
    line-height:16px;
}

Другим вариантом было бы добавить значок в качестве фонового изображения, добавив отступ слева в ячейку: 

td.feed {
    background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
    padding-left: 18px; /* width of feed icon plus 2px spacing */
}

Второй будет означать, что вы вообще можете убрать необходимость в таблицах, теперь есть идея ...

6 голосов
/ 15 января 2009

Другие ответы, в которых говорится, что изображение не должно быть частью контента и предназначено только для украшения, что является дискуссионным. Я действительно считаю, что вы должны добавить пустой атрибут alt к своему изображению, чтобы программы чтения с экрана могли игнорировать изображение, если вы решите сохранить текущий метод.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * - то, что вам нужно здесь использовать, но text-bottom. Я также предполагаю, что вы хотите, чтобы это была ссылка, поэтому вот полный пример кода: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>garethjmsaunders.co.uk</title>
    <style type="text/css">
    a { text-decoration: none; }
    a img { border: 0; vertical-align: text-bottom; }
    </style>
  </head>
<body>
<table>
<tr>
<td>
  <a href="" title="garethjmsaunders.co.uk rss feed">
    <img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
    My feed
  </a>
</td>
</tr>
</table>
</body>
</html>

Если это по-прежнему нежелательно, вы можете поэкспериментировать с line-height и другими значениями для vertical-align, чтобы увидеть, что работает лучше для вас.

2 голосов
/ 15 января 2009

Что плохого в создании фонового изображения? 

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}
1 голос
/ 15 января 2009

Попробуйте это: 

<td>
   <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
   <span class="feedTxt">My feed</span>
 </td>

 .feedTxt { line-height: 20px; } /* Or whatever the height of the image is.  Adjust as needed. */
1 голос
/ 15 января 2009

просто попробуйте "вертикальное выравнивание: середина" на теге IMG, после чего вы также можете установить отступ для TD

0 голосов
/ 11 октября 2014

Я попробовал метод фонового изображения, но он мне не понравился так сильно, как этот ...

В CSS ... 

.iconLabel {
    position: relative;
    top: -6px;
    padding-left: 8px;
}

На странице ... 

<td style="text-align:center;">
    <a href="overview.cfm"
        ><img alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>
  • Поиграйте с атрибутом "top" , чтобы переместить текст / метку вверх и вниз.
  • Поиграйте с атрибутом padding , чтобы изменить горизонтальное пространство между значком и текстом / меткой.
  • Вам следует проверить его в любых браузерах, которые вас интересуют, поскольку они могут отображаться с небольшими различиями.
0 голосов
/ 15 января 2009

Я бы поместил два элемента (изображение и текст) в отдельные ячейки таблицы. Вы можете вложить другой стол. Это хорошее место для начала. Затем вы можете поиграть с отступами и т. Д. Для настройки. 

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
0 голосов
/ 15 января 2009

Вы можете сделать position: relative; top: 3px; для тега <img>. Вы также можете попробовать vertical-align: middle; на теге <td>, но я не думаю, что он будет работать правильно, так как я уверен, что сталкивался с этим раньше. Вы также можете поместить их в отдельные теги <td>, но это вроде нет-нет.

...