<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 пикселя?
Ну, если вы выбираете метод фонового изображения, то это очень просто:
background: url(feed.png) left center no-repeat
Изображение выравнивается с базовой линией текста, это не включает высоту спуска, которая является тиком в букве 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 */
}
Во-вторых, вы могли бы удалить необходимость в таблицах вообще, теперь есть идея...
Другие ответы, которые определяют изображение, не должны быть частью контента и предназначены только для оформления, что является спорным. Я верю, что вы должны добавить пустой образ 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, чтобы увидеть, что лучше всего подходит вам.
Неправильно ли это сделать фоновое изображение?
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
просто попробуйте "vertical-align: middle" в теге IMG, после чего вы также можете установить дополнение для TD
Попробуйте следующее:
<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. */
Вы можете сделать position: relative; top: 3px; в теге <img>. Вы также можете попробовать vertical-align: middle; в теге <td>, но я не думаю, что он будет работать должным образом, так как я уверен, что столкнулся с этим раньше. Вы также можете поместить их в отдельные теги <td>, но это не-no.
Я бы поставил два элемента (изображение и текст) в свои отдельные ячейки таблицы. Вы можете вложить еще один стол. Это хорошее место для начала. Затем вы можете играть с дополнением и т.д. Для настройки.
<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
Я попробовал метод фонового изображения, но мне не понравилось столько, сколько это...
В 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>