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

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

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

http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif  Мой канал

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

Ответы

Ответ 1

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

background: url(feed.png) left center no-repeat

Ответ 2

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

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

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

Другой вариант - добавить значок в качестве фонового изображения, добавив в ячейку padding-left:

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 */
}

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

Ответ 3

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

Свойством vertical-align является тот, который вам нужно использовать здесь, но то, что вы хотите использовать, 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, чтобы увидеть, что лучше всего подходит вам.

Ответ 4

Неправильно ли это сделать фоновое изображение?

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}

Ответ 5

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

Ответ 6

Попробуйте следующее:

<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. */

Ответ 7

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

Ответ 8

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

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>

Ответ 9

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

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