Выравнивание картинки и текста

[SeZuka]

Как можно совместить два вида выравнивания для картинки (т.е. left и middle)?

А именно, мне нужно чтобы текст ссылки обтекал картинку справа и выравнивался с ней вертикально по центру.

Пример кода:

<tr>
<td width="300">
<a href="1.html" onMouseOver="document.pic1.src='1.gif'" onMouseOut="document.pic1.src='1_.gif'">
<img src="1_.gif" alt="" NAME="pic1" align="left" width="100" height="100" hspace="5" vspace="0" BORDER=0>
Этот текст должен быть справа и по вертикальному центру</a>
</td>
</tr>

[Justnewone]

Поменяйте картинку и ссылку местами и картинке скажите вертикально выравниваться по середине. Все через CSS, тут на сайте посмотрите.

[SeZuka]

Так картинка должна быть в этой ссылке.

[Int]

так это align и valign. Попробуй может быть ещё картинке float:left сделать

[Justnewone]

Так картинка должна быть в этой ссылке.

просто картинке в CSS сказать "вертикальное выравнивание по середине"

[SeZuka]

так это align и valign. Попробуй может быть ещё картинке float:left сделать

dreamweaver 8 подсказывает что атрибут valign для тега img не поддерживается и браузеры с ним согласны.

Стили тоже не помогают. Экспериментировал несколько часов и с ячейкой и со ссылкой и с картинкой в ней.

Видимо придется разбить ссылку на две части и поместить в разные ячейки.

просто картинке в CSS сказать "вертикальное выравнивание по середине"

можно поподробней, что написать в картинке и что написать в css?

[s0rr0w]

Ключевое слово CSS - vertical-align

Edited October 20, 2009 by s0rr0w

[SeZuka]

Ключевое слово CSS - vertical-align

Уже всяко пробовал, не получается.

Если есть возможность, приведите рабочий код

[s0rr0w]

Уже всяко пробовал, не получается.

Если есть возможность, приведите рабочий код

Посмотрел на код выше. Да, действительно не поможет, так как картинке присваивается float: left, что извлекает ее из потока. Самый быстрый способ - две ячейки.

Если картинка у вас всегда одного размера, то можете положить ее как фон у TD, самой TD присвоить vertical-align: middle;

Ссылке поставить display: block; padding-left: 100px; min-height: 80px; height: 80px;

Вообще ваша задача немного нетривиальная с точки зрения HTML, потому что требует немного неестесственного поведения элементов.

Edited October 20, 2009 by s0rr0w

[Justnewone]

Посмотрел на код выше. Да, действительно не поможет, так как картинке присваивается float: left, что извлекает ее из потока. Самый быстрый способ - две ячейки.

Если картинка у вас всегда одного размера, то можете положить ее как фон у TD, самой TD присвоить vertical-align: middle;

Ссылке поставить display: block; padding-left: 100px; min-height: 80px; height: 80px;

Вообще ваша задача немного нетривиальная с точки зрения HTML, потому что требует немного неестесственного поведения элементов.

в том-то и дело, может не надо флоат вообще? я хотел на это натолкнуть. Тогда, наверное, все проще.

[SeZuka]

Спасибо за подсказку, попробую сделать ссылку блоком и картинку в фон поставить.

[SeZuka]

Сделал так:

.L {
	background-image: url(bt1_.gif);
	background-repeat: no-repeat;
	display: block;
	padding-left: 65px;
	height:62px;
}
.L:hover{
	background-image: url(bt1.gif);
}

<a href="index.html" class="L">Текст ссылки</a>

Отображается как надо, но реагирует на мышку весь блок, а изначально хотелось чтоб реагировала картинка и текст ссылки.

Нет в жизни счастья, всегда приходится выбирать между чем-то

[Justnewone]

Отображается как надо, но реагирует на мышку весь блок, а изначально хотелось чтоб реагировала картинка и текст ссылки.

Нет в жизни счастья, всегда приходится выбирать между чем-то

ПОтому что display: block; на ссылке. оберните все в спан, перенесите на него блок и бекграунд, ссылка пусть останется инлайновой, картинка реагировать не будет правда...

Я честно говоря не понимаю может чего??? что мешает у картинки, тега IMG убрать к чертовой матери все атрибуты и все стили, оставив ей только один - vertical-align:middle.

Тогда она всегда будет по середине текста. Но, правда, лучше тогда тексту на вторую строку не переносица ))) Может ваш случай???

[SeZuka]

Мой случай: картинка должна меняться и текст может переноситься на несколько строк и строчки должны быть по центру картинки.

Решил оставить вариант с блоками.