Форум Сайтостроение Веб-строительство

Как выровнять див по центру ячейки таблицы?

HM
На сайте с 23.01.2012
Offline
53
HeyMan
618

Всем привет!

В ячейке таблицы расположен див. Текст1 и Текст2 выполняют обтекание картинки с одной стороны с использованием float:left. Но вся конструкция прижимается к левому краю ячейки таблицы. Как выровнять данную конструкцию строго по центру ячейки? 


<table>

<tr>

<td>

картинка<div style="text-align:left;"><span style="color:#333333;">текст1</span><br><span style="color:red">текст2</span></div>

</td>

</tr>

</table>
Samail
На сайте с 10.05.2007
Offline
361
Samail
#1
HeyMan:
float:left

float:left убери, в стиль div добавь 

display: inline-block;vertical-align: top;

в td - 

align="center"
HM
На сайте с 23.01.2012
Offline
53
HeyMan
#2
Samail:
float:left убери, в стиль div добавь 
display: inline-block;vertical-align: top;

в td - 
align="center"

Если убираю float:left, пропадает обтекаемость картинки, Текст1 и Текст2 оказываются под картинкой.

Упс, недоглядел, кеш надо было почистить)). Спасибо, работает!

V
На сайте с 30.11.2010
Offline
92
voltest
#3

Кхм извините за офтоп. А зачем вам собственно див в таблице. Таблицы на данный момент должны использоваться только для представления табличных данных.

Как по мне если уж так нужно, то рисуем внутри ячейки див с шириной = ширине ячейки и далее в этом диве делаем все что угодно, но это ребята наркомания.

Сделать то можно сотней способов.

начиная от задания ширины дива и св-ва margin 0 auto (правда я хз как оно сработает в таблице, даже в голову не приходило так делать), заканчивая рисованием дива в ширину ячейки, но тогда вопрос зачем вам таблица.

HM
На сайте с 23.01.2012
Offline
53
HeyMan
#4

voltest, Потому что на сайте нужна именно таблица, с множеством колонок и полей.

V
На сайте с 30.11.2010
Offline
92
voltest
#5
HeyMan:
voltest, Потому что на сайте нужна именно таблица, с множеством колонок и полей.

Если я правильно понял то.

http://www.cssdesk.com/DDkHx

только я вам это не показывал, это просто жесть.

Ну а если текста много то задаем ширину блока контента (текст)

http://www.cssdesk.com/hFhv8

Разберетесь я думаю, отступы сами проставите,

HM
На сайте с 23.01.2012
Offline
53
HeyMan
#6

voltest, Да, да, это то что надо. А что в этом страшного?))

V
На сайте с 30.11.2010
Offline
92
voltest
#7
HeyMan:
voltest, Да, да, это то что надо. А что в этом страшного?))

Блочный (ну пусть инлайн-блочный) элемент внутри встроенного.

Ну такое.

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

Во всех справочниках, в хелпах поисковых систем, учебниках написанно что-то вроде.

Таблица должна использоваться для представления табличных данных (цены например).

Но опять же все что не запрещено спецификацией то...

Сейчас просто есть флекбоксы и пр. а тут таблицы с дивами.... При просмотре на мобиле особенно при косяках с шириной (% и пиксели) может все поехать. Плюс таблицы имеют кучу различных отступов, мду ячейками, внутри и пр. пр. считать оч неудобно. В общем это костыль как по мне в чистом виде, на своем сайте я бы такого не сделал.

S
На сайте с 30.09.2016
Offline
469
Sitealert
#8

В ячейках таблицы можно размещать любые элементы, и это никакой не костыль, и ничего страшного в этом нет. И лет 10 назад табличная вёрстка была обычным делом, на ней делалось большинство сайтов. Сейчас же таблицы для вёрстки практически не используются по причине невозможности сделать респонсив-дизайн на такой вёрстке. Поэтому их используют там, где это действительно необходимо.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий