Раздельное выравнивание в TD

[larafyll]

Есть ячейка таблицы. В ней - 2 слова:

1-е:

Должно быть выровнено по левой стороне и по середине высоты

2-е:

Поверх первого, по правой стороне, по середине высоты. Меньшего шрифта.

Я уже час пытаюсь найти решение. Лучшее из того, что у меня получилось выглядит следующим образом:

<td>
	<div style = "position: absolute">
		Первое слово
	</div>
	<div style = "text-align: right">
		<!-- Невидимый блок - для того, чтобы ячейка была необходимой высоты -->
		<span style="visibility: hidden"> a </span>	
		<span style = "font-size: 8px">Второе слово</span>
	</div>
</td>

По идее осталось выровнять последний <span> по вертикали относительно его родителя.

Но для этого родителю надо дописать vertical-align: middle и display: table-cell, из-за которого слетит его выравнивание по правой стороне

Есть идеи?

P.S. кроссбраузерность не интересует, требуется решение под Google Chrome

[DjTarik]

Ячейке вертикальное выравнивание по центру, правому слову - "флот райт".

Вроде всё, если я правильно понял задачу. Если нет - давайте скрин того, что необходимо получить.

[Justnewone]

Ячейке вертикальное выравнивание по центру, правому слову - "флот райт".

Вроде всё, если я правильно понял задачу. Если нет - давайте скрин того, что необходимо получить.

По идее флоат переопределит на дисплей:блок.

[DjTarik]

По идее флоат переопределит на дисплей:блок.

Однозначно. Тогда не прокатит. Нужно узнать у автора, зачем ему центрирование, и какова может быть высота.

[larafyll]

Ячейке вертикальное выравнивание по центру, правому слову - "флот райт".

Вроде всё, если я правильно понял задачу. Если нет - давайте скрин того, что необходимо получить.

Один из первых опробованных вариантов.

<td style = "vertical-align: middle">
	Первое слово
	<span style = "float: right; font-size: 8px">Второе слово</span>
</td>

Второе слово не выравнивается по середине высоты.

Нужно узнать у автора, зачем ему центрирование, и какова может быть высота.

Центрирование такое из-за дизайна.

Высота резиновая.

[DjTarik]

Центрирование такое из-за дизайна.

Высота резиновая.

Первое, что прищло на ум - если это элемент дизайна - то нафига там таблицы)

[larafyll]

Первое, что прищло на ум - если это элемент дизайна - то нафига там таблицы)

Если вам удобно - подставьте <div> вместо <td>, а вопрос остается прежним

[DjTarik]

Если вам удобно - подставьте <div> вместо <td>, а вопрос остается прежним

На сколько строк могут растягиваться ваши слова слева и справа? Там только по одному слову? Или может быть и в 2-3 строки?

[larafyll]

На сколько строк могут растягиваться ваши слова слева и справа? Там только по одному слову? Или может быть и в 2-3 строки?

По одному слову, 1 строка.

[DjTarik]

По одному слову, 1 строка.

Тогда меняй таблицу на див, ему position: relative; Относительно него абсолютно позиционируй слова. top: 50%; left: 0; (левому) right: 0; (правому) и обоим margin-top: "минус половина высоты";. Высоту строк сам задай и отцентрируешь слова внутри. Всё.

[larafyll]

и обоим margin-top: "минус половина высоты"

Как уже было сказано, высота резиновая (зависит от ячейки справа).

[DjTarik]

Как уже было сказано, высота резиновая (зависит от ячейки справа).

Вы же сами сказали:

>>На сколько строк могут растягиваться ваши слова слева и справа? Там только по одному слову? Или может быть и в 2-3 строки?

>>По одному слову, 1 строка.

Не так? O_o

[larafyll]

Вы же сами сказали:

>>На сколько строк могут растягиваться ваши слова слева и справа? Там только по одному слову? Или может быть и в 2-3 строки?

>>По одному слову, 1 строка.

Не так? O_o

Абсолютно верно. В рассматриваемой ячейке не может быть больше 1-й строки текста, но высота ячейки зависит от соседней.

[DjTarik]

Абсолютно верно. В рассматриваемой ячейке не может быть больше 1-й строки текста, но высота ячейки зависит от соседней.

Перечитайте ещё раз моё сообщение - я НЕ привязываюсь к высоте родителя.

"минус половина высоты" - это высота строки, содержащей одно (в вашем случае) слово. Высоту вы задаёте сами.

[larafyll]

Перечитайте ещё раз моё сообщение - я НЕ привязываюсь к высоте родителя.

"минус половина высоты" - это высота строки, содержащей одно (в вашем случае) слово. Высоту вы задаёте сами.

Оу, и вправду. Спасибо