Как выровнять изображение и текст по вертикали внутри элемента TD?
__ isset - магический метод. Магические методы - это методы, которые называются внутренне.
Рассмотрим следующий код
<?php
// Declare a simple class
class TestClass
{
public $foo;
public function __construct($foo)
{
$this->foo = $foo;
}
public function __toString()
{
return $this->foo;
}
}
$class = new TestClass('Hello');
echo $class;
?>
здесь _ toString - магический метод, но вы не будете его называть. Когда строка echo $ class; выполняется. PHP знает, что теперь я должен рассматривать объект $ class как строку и рассматривать любой объект как метод вызова _toString, если он реализован в этом классе.
Все магические методы, называемые подобными в косвенных путь.
Другой пример, следующий за
<?php
class CallableClass
{
public function __invoke($x)
{
var_dump($x);
}
}
$obj = new CallableClass;
$obj(5);
var_dump(is_callable($obj));
?>
Аналогично, в приведенном выше коде var_dump (is_callable ($ obj)); косвенно вызывает метод __invoke magic.
8 ответов
Ну, при выборе метода фонового изображения затем это очень просто:
background: url(feed.png) left center no-repeat
Другие ответы, которые указывают изображение, не должны быть частью содержания и просто для художественного оформления, которое спорно. Я действительно полагаю, что необходимо добавить пустое 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 видеть что работы лучше всего для Вас.
Изображение выравнивается к основной линии текста, это не включает высоту подстрочного элемента, которая является 'галочкой' в букве как 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 */
}
Второй означал бы, что Вы могли устранить необходимость таблиц вообще, теперь существует идея...
Попробуйте это:
<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. */
Что случилось с созданием его фоновое изображение?
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
просто попробуйте "вертикальный - выровняйтесь: середина" на теге img, после, чем Вы может также установить дополнение для TD
Я поместил бы эти два элемента (изображение и текст) в их собственных отдельных ячейках таблицы. Вы могли вложить другую таблицу. Это - хорошее место для запуска. Затем Вы могли играть вокруг с дополнением, и т.д. для корректировки.
<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> теги, но это своего рода нет - нет.