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

StackOverflow https://stackoverflow.com/questions/447539

  •  22-07-2019
  •  | 
  •  

Вопрос 

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

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


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

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

Это было полезно?

Решение

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

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

Другие советы

Изображение выравнивается по базовой строке текста, это не включает высоту спуска, которая является "галочкой" в букве, такой как 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 */
}

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

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

просто попробуйте "выровнять по вертикали: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. */

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

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

Вы могли бы сделать position: relative; top: 3px; на <img> пометка.Вы также могли бы попробовать vertical-align: middle; на <td> тег, но я не думаю, что это будет работать должным образом, так как я почти уверен, что сталкивался с этим раньше.Вы также могли бы поместить их в отдельные <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>
  • Поиграйте с "вершина" атрибут для перемещения текста / метки вверх и вниз.
  • Поиграйте с заполнение атрибут для изменения горизонтального расстояния между значком и текстом / меткой.
  • Вам следует проверить это во всех браузерах, которые вас интересуют, так как они могут отображать с небольшими различиями.
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top