Выравнивание разносортного содержимого valign:middle в ячейки таблицы

[Sannis]

Что имеется: таблица, в ней ячейка, в ней лежит span. Нужно иметь возможность помещать в span как текст, так и картинку, так и всё вместе. При этом чтобы содержимое было выравнено по высоте по средней линии.

 

Что у меня есть:

HTML:

<table class="simple">
<tr>
	<td class="simple">
		<span onmousedown="return false;" class="button"><img alt="H1" class="button" src="image.png"/> Image</span>
	</td>
</tr>
</table>

 

CSS:

table.simple
{
margin: 0px;
padding: 0px;
border: 0px;

/* cellspacing */
border-spacing: 2px;
border-collapse: 2px;
/* cellspacing */
}
td.simple
{
margin: 0px;

/* cellpadding */
padding: 0px;
/* cellpadding */

border: 0px;

vertical-align: middle;
}
span.button
{
border: 1px solid transparent;
width: auto;
height: 18px;
display: block;
vertical-align: middle;
cursor: default;

padding: 1px;
}
img.button
{
margin: 0px;
margin-left: 1px;
margin-right: 1px;
vertical-align: middle;
}

 

Но тем не менее в Опере и в ФФ и текст и картинка по центру

Как исправить положение?

[Jax]

А что дает такое решение? Ты же сам его написал сверху.

 

<td class="simple" valign="middle">

<span onmousedown="return false;" class="button"><img alt="H1" class="button" src="image.png"/> Image</span>

</td>

 

>При этом чтобы содержимое было выравнено по высоте по средней линии.

Какой средней линии?

[Sannis]

Средняя — это посередине высоты ячейки. Не стал гемороиться, сделал вложенную таблицу, в ней verticel-align:middle; верно отработал(в ФФ и Опере по крайней мере, в ИЕ мне лень смотреть). В общем закрыто.

 

P.S. Результат: пост, картинка.