Как правильно объединить картинку и текст в одну ссылку?

[borus]

Здравствуйте.

Мой вариант:

<a href... class="my">
<img ... >
<span>Текст ссылки</span>
</a>

где

.my{
display:block;
align:center;
}

чтобы картинка и текст были отцентрированы

Это будет правильно?

Edited January 30, 2012 by borus

[SelenIT]

Наверное, не align, а хотя бы text-align?

Вообще, если в результате должна быть отцентрированная надпись под отцентрированной картинкой, то я бы сделал

.my > * { display: block; margin: 0 auto; }

(а самой ссылке — что-то, что дает блочное отображение и нужным образом вписывает в окружающий контекст, напр. float: left, display: inline-block и т.п.).

[lexxcode]

Если картинка не несет какой-то смысловой нагрузки, а лишь декоративную, можно сделать как-то так

[borus]

Если картинка не несет какой-то смысловой нагрузки, а лишь декоративную, можно сделать как-то так

Хороший пример.

К чему замечание о смысловой нагрузке?

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

например

Edited January 31, 2012 by borus

[borus]

Наверное, не align, а хотя бы text-align?

Вообще, если в результате должна быть отцентрированная надпись под отцентрированной картинкой, то я бы сделал

.my > * { display: block; margin: 0 auto; }

(а самой ссылке — что-то, что дает блочное отображение и нужным образом вписывает в окружающий контекст, напр. float: left, display: inline-block и т.п.).

Да.

Конструкция "> *" означает все теги, что внутри класса?

Что-то не получилось, взгляните

[lexxcode]

Если картинка не несет какой-то смысловой нагрузки, а лишь декоративную, можно сделать как-то так

Хороший пример.

К чему замечание о смысловой нагрузке?

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

например

Замечание к тому, что изначально из вашего вопроса не понятна (для меня) была логика ссылки.

Я привел пример, когда картинка несет сугубо декоративный характер.

Если картинка декоративный элемент, то он ставится в background

Если картинка несет смысловую нагрузку, то картинку нужно вставлять через img

Пример когда картинка несет смысл

[borus]

Если картинка несет смысловую нагрузку, то картинку нужно вставлять через img

в целях SEO?

[lexxcode]

Если картинка несет смысловую нагрузку, то картинку нужно вставлять через img

в целях SEO?

SEO?? не не слышал)))

А вообще, ну да для поисковиков. Как бы так принято, ибо если пихать в img всякий хлам, то и поисковик этот же хлам будет выдавать. А вам оно надо?

[SelenIT]

Конструкция "> *" означает все теги, что внутри класса?

Всех непосредственных потомков (child nodes) элемента с классом.