Как выровнять изображение и текст по вертикали в элементе TD?
<td>
<img src = "http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
Вот как это выглядит:
(source: garethjmsaunders.co.uk)
Моя лента
Значок и текст неправильно выровнены по вертикали. Значок находится вверху ячейки таблицы, текст - внизу. И текст, и значок занимают 16 пикселей, но ячейка по-прежнему съедает 19. Как я могу выровнять их, чтобы сохранить эти 3 пикселя?
Вот решение => stackoverflow.com/a/57590933/2736742
Ответы 10
Вы можете сделать position: relative; top: 3px; на теге <img>. Вы также можете попробовать vertical-align: middle; с тегом <td>, но я не думаю, что он будет работать должным образом, поскольку я почти уверен, что сталкивался с этим раньше. Вы также можете поместить их в отдельные теги <td>, но это своего рода запрет.
Почему это может быть отказом, если вы уже используете стол? Вы хотя бы получите автоматическое центрирование по вертикали ...
Ну, я не знаю, в каком контексте у него это есть, есть вероятность, что таблица все еще используется должным образом, однако, если вы разделите ее, для меня 2002 год будет слишком большим. Вот почему я сказал «отчасти» - я бы лично подумал об этом, но вокруг этих частей много сторонников CSS.
Я не голосовал против, это сделал кто-то другой. Я дважды проиграл голосование, лол. Люди здесь иногда бывают странными.
Вероятно, это потому, что кто-то задает вопрос о HTML, и вы оба, вероятно, должны ответить. Это похоже на то, как я отвечаю на некоторые вопросы по Фортрану, но ни разу не касался его за 20 лет (черт возьми, это так долго?).
Изменение HTML изменяет семантическое значение страницы. Поскольку это проблема макета, а не содержимого или семантики, положение должно быть скорректировано с помощью решения на основе макета, либо с помощью CSS, либо путем изменения DOM с помощью javascript.
«Вам двоим, наверное, не стоит отвечать»? Вы серьезно это только что сказали? Ух ты.
Я бы поместил два элемента (изображение и текст) в отдельные ячейки таблицы. Вы можете вложить еще один стол. Это хорошее место для начала. Затем вы можете поиграть с заполнением и т. д., Чтобы отрегулировать.
<td>
<table><tr style = "vertical-align:top;"><td><img src = "path_here" /></td><td>my feed</td></tr></table>
</td>
Такое вложение таблиц снижает семантическую ценность страницы. Поскольку это проблема макета, а не содержимого или семантики, положение должно быть скорректировано с помощью решения на основе макета, либо с помощью CSS, либо путем изменения DOM с помощью javascript.
просто попробуйте "vertical-align: middle" в теге IMG, после чего вы также можете установить отступ для TD
Изображение выравнивается по базовой линии текста, это не включает высоту нижнего выносного элемента, которая является «галочкой» в букве, например 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 */
}
Второй вариант означал бы, что вы могли бы вообще избавиться от необходимости в таблицах, теперь есть идея ...
Я лично использую фоновое изображение, единственным недостатком является то, что изображение не кликабельно, и многие пользователи пытаются щелкнуть изображение перед текстом.
Если вы поместите фоновое изображение в элемент <a>, оно станет интерактивным.
Ах. Туш. Я никогда об этом не думал. Обычно я делал размах вокруг а. Интересно.
Что ж, если выбрать метод фонового изображения, то это очень просто:
background: url(feed.png) left center no-repeat
+1, изображение должно быть фоновым, поскольку оно больше украшает, чем реальный контент.
Что плохого в том, чтобы сделать его фоновым изображением?
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
Другие ответы, в которых говорится, что изображение не должно быть частью контента и предназначаться только для украшения, что является спорным. Я действительно считаю, что вы должны добавить к своему изображению пустой атрибут 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, чтобы увидеть, что лучше всего подходит для вас.
Попробуй это:
<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. */
Я пробовал использовать метод фонового изображения, но он мне не так сильно понравился ...
В 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>
- Поиграйте с атрибутом "вершина", чтобы переместить текст / метку вверх и вниз.
- Поиграйте с атрибутом набивка, чтобы изменить горизонтальное расстояние между значком и текстом / меткой.
- Вы должны проверить это во всех браузерах, которые вас беспокоят, так как они могут отображаться с небольшими отличиями.
Вы можете добавить таблицу внутри td с одной строкой и двумя tds
<td>
<table><tr>
<td><img src = "image/myimage.gif" alt = "myimage.gif"/></td>
<td>My text</td>
</tr></table>
</td>
Спасибо всем, кто помог. Я пробовал все решения, кроме разделения значка и текста на два TD. Работало только решение с фоновым изображением.