Выравнивание по вертикали блок (картинка) + 1 или 2 строки текста

[BAV]

Добрый день.

Задача следующая выводится список, элементами которого является ссылка (блок с фоновым изображением 45px x 45px) и справа от него идет название. Это название может быть в одну или две строчки. Необходимо чтобы при любом кол-ве строк, текст выравнивался по середине. Пример изображения здесь http://files.mail.ru/OP74ZZ?t=1 С помощью таблички такое делается в легкую, а как с div'ами?

[psywalker]

display: table-cell; для ИЕ6-7 экспрешаны

[SelenIT]

Или как-то так, без экспрешнов.

[BAV]

Решил попробовать table-cell. Следующий вариант работает, но только если указывать фиксированную высоту блока.

<div style="">
   <div style="border:1px solid;float:left;width:47px;display:table-cell;vertical-align:middle;">
     <div style="display:block;background:green;width:45px;height:45px;"> </div>
   </div>
   <div style="border:1px solid;display:table-cell;height:47px;vertical-align:middle;">
     <a href="" style="vertical-align:middle;">sdfdsfsdf <br>fgjsd klj lk </a>
   </div>
</div>

Если так, то наверное проще табличку сделать, чем создавать сложные конструкции из js+css+html. Думаю и работать быстрее будет.

Edited June 21, 2011 by BAV

[klierik]

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

тут можно сделать элементарно дивом позиционированным абсолютно. а в нем контент будет иметь отступ сверху -50% и тогда он будет по-центру.

[BAV]

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

тут можно сделать элементарно дивом позиционированным абсолютно. а в нем контент будет иметь отступ сверху -50% и тогда он будет по-центру.

Абсолютным долже быть див с текстом или с картинкой? Я что-то идею не понял пока...

[klierik]

у тебя есть блок - он релатив. а так же у него паддинг справа на ширину допускаемого текста.

в нем картинка - она растягивает этот див.

так же тут же идет див. у которого абсолют, фикс. ширина и top: 50%; right: 0;

- в нём есть див у которого margin: -50% 0 0;

но тут надо поигратся, возможно понадобится 2 внутрених дива и вместо magrin на него вешать relative+top:-50%;

[BAV]

у тебя есть блок - он релатив. а так же у него паддинг справа на ширину допускаемого текста.

в нем картинка - она растягивает этот див.

так же тут же идет див. у которого абсолют, фикс. ширина и top: 50%; right: 0;

- в нём есть див у которого margin: -50% 0 0;

но тут надо поигратся, возможно понадобится 2 внутрених дива и вместо magrin на него вешать relative+top:-50%;

Ну попробуем... Спасибо. Напишу потом что получилось

[SelenIT]

Решил попробовать table-cell. Следующий вариант работает, но только если указывать фиксированную высоту блока.

А так?

<div style="display:table-row">
   <div style="border:1px solid;width:47px;display:table-cell;vertical-align:middle;">
     <div style="display:block;background:green;width:45px;height:45px;"> </div>
   </div>
   <div style="border:1px solid;display:table-cell;vertical-align:middle;">
     <a href="" style="vertical-align:middle;">sdfdsfsdf <br>fgjsd klj lk </a>
   </div>
</div>

Вся прелесть table-cell, что он позволяет ставить высоты соседних блоков в зависимость друг от друга, как у ячеек реальной таблицы. А если имитировать им ряд несвязанных таблиц (еще и плавающих впридачу), то понятно, что большого преимущества он не принесет...

[psywalker]

Решил попробовать table-cell. Следующий вариант работает, но только если указывать фиксированную высоту блока.

А так?

<div style="display:table-row">
   <div style="border:1px solid;width:47px;display:table-cell;vertical-align:middle;">
     <div style="display:block;background:green;width:45px;height:45px;"> </div>
   </div>
   <div style="border:1px solid;display:table-cell;vertical-align:middle;">
     <a href="" style="vertical-align:middle;">sdfdsfsdf <br>fgjsd klj lk </a>
   </div>
</div>

Вся прелесть table-cell, что он позволяет ставить высоты соседних блоков в зависимость друг от друга, как у ячеек реальной таблицы. А если имитировать им ряд несвязанных таблиц (еще и плавающих впридачу), то понятно, что большого преимущества он не принесет...

Дружище, а у меня есть несколько вопросов к тебе:

1. Я заметил, что ты используешь display:table-row, но так же уже ни раз замечал, что все делают без него подобные вещи. Зачем он тут и почему нельзя без него обойтись?

2. По идее display:table-cell; - это ячейки таблицы, а значит если переводить их на язык CSS, то это ячейки display:table;. Я прав? И насколько оправдано использовать display:table-cell; без display:table;? Какие минусы это всё несёт?

[BAV]

Сразу напишу смотрю в: ff4.0.1, ie8 (в 6 и 7 пока даже не открывал) и opera 11.11 под windows7

Попытка через абсолютное позиционирование:

<div style="border:1px solid;width:60px;position:relative;padding-right:130px;background:yellow;">
  <div style="display:block;background:green;width:45px;height:45px;"> </div>
  <div style="position:absolute;width:130px;right:0;top:50%;background:red;">
      <div style="position:relative;top:-50%;background:#000;"><a href="" >самба<br> де <br>жанейро</a></div>
  </div>
</div>

Ожидаемый результат получился только в IE, если я верно реализовал идею. FF и Opera - не скушали.

Вариант с table-row и table-cell

<div style="display:table-row">
   <div style="border:1px solid;width:47px;display:table-cell;vertical-align:middle;">
     <div style="display:block;background:green;width:45px;height:45px;"> </div>
   </div>
   <div style="border:1px solid;display:table-cell;vertical-align:middle;">
     <a href="" style="vertical-align:middle;">самба<br> де <br>жанейро</a>
   </div>
</div>

Cработало как надо в FF и opera, и.е. отказался располагать на одной строке блок с картинкой и блок с текстом. Попробовал float для блока с картинкой, ушло выравнивание по вертикале.

Edited June 21, 2011 by BAV

[SelenIT]

По идее display:table-cell; - это ячейки таблицы, а значит если переводить их на язык CSS, то это ячейки display:table;. Я прав?

Насколько я понимаю табличную модель CSS, она состоит из иерархии специальных блоков, соответствующих иерархии html-таблицы (table/tbody/tr/td, в CSS это display:table/table-row-group/table-row/table-cell соотв-но). По спеке, недостающие блоки этой иерархии достраиваются неявно (т.е. если написать просто table-cell вне table-что-то, вокруг него создастся "виртуальная обертка" с table-row, вокруг нее — еще одна с table-row-group, и последняя с display:table, а если вложить display:table-cell напрямую в display:table — между ними окажутся две "виртуальные прослойки" с display:table-row-group и table-row). На практике браузеры иногда подглючивают при генерации этих оберток и прослоек (правда, чем дальше, тем меньше, но какие-то древние Оперы и FF требовали задавать прослойку с table-row явно, с тех пор у меня привычка подстраховываться...).

и.е. отказался располагать на одной строке блок с картинкой и блок с текстом

А compatibility mode не включен случайно? В штатном режиме IE8 должен слушаться display:table(-*). Вот в режимах совместимости — увы, как и IE7-...

[BAV]

А compatibility mode не включен случайно? В штатном режиме IE8 должен слушаться display:table(-*). Вот в режимах совместимости — увы, как и IE7-...

Мне конечно очень интересно, реально ли найти адекватное блочное решение. Но я все-таки делаю на табличках. Это гораздо более читабельное и даже более оптимизированное решение, в данном случае.

[psywalker]

По идее display:table-cell; - это ячейки таблицы, а значит если переводить их на язык CSS, то это ячейки display:table;. Я прав?

Насколько я понимаю табличную модель CSS, она состоит из иерархии специальных блоков, соответствующих иерархии html-таблицы (table/tbody/tr/td, в CSS это display:table/table-row-group/table-row/table-cell соотв-но). По спеке, недостающие блоки этой иерархии достраиваются неявно (т.е. если написать просто table-cell вне table-что-то, вокруг него создастся "виртуальная обертка" с table-row, вокруг нее — еще одна с table-row-group, и последняя с display:table, а если вложить display:table-cell напрямую в display:table — между ними окажутся две "виртуальные прослойки" с display:table-row-group и table-row). На практике браузеры иногда подглючивают при генерации этих оберток и прослоек (правда, чем дальше, тем меньше, но какие-то древние Оперы и FF требовали задавать прослойку с table-row явно, с тех пор у меня привычка подстраховываться...).

Спасибо, понял

[SelenIT]

реально ли найти адекватное блочное решение

А вот так не годится?

[BAV]

реально ли найти адекватное блочное решение

А вот так не годится?

Вот это да, вот это красиво!!! Спасибо огромное, все очень просто. Я ведь даже попробовал с inline-block поиграть, но хаки для IE не пробовал. Еще раз большое спасибо!!!

[BAV]

Вот это да, вот это красиво!!! Спасибо огромное, все очень просто. Я ведь даже попробовал с inline-block поиграть, но хаки для IE не пробовал. Еще раз большое спасибо!!!

Стал натягивать пример на рабочий макет и понял почему у меня не получалось с inline-block. Правый div, который с текстом, его нужно плавающим сделать. А тут получается фиксированным. Очень жаль, красиво. Все равно спасибо за помощь!

[SelenIT]

В каком смысле плавающим? С произвольной шириной? Так достаточно max-width ограничить, чтоб общая сумма двух дивов (+ страховка на пробел между ними) не выбивалась из ширины контейнера...

[BAV]

В каком смысле плавающим? С произвольной шириной? Так достаточно max-width ограничить, чтоб общая сумма двух дивов (+ страховка на пробел между ними) не выбивалась из ширины контейнера...

Сам контейнер, который в нашем примере выглядит так:

<div style="border:1px solid;width:200px;background:yellow;">

в моем случае еще и имеет ширину, заданную в %.

Edited June 22, 2011 by BAV

[BAV]

В голову пришла мысль сделать иконку relative. И, о чудо, кажется получилось. FF и IE8 съели без проблем. IE7 смещает строки при максимальном сжатии по ширине, но мне кажется, что это косяк IE7 portable + windows7. Если кто-то на нормальной установке IE7 сможет проверить, будет замечательно. Я попозже сам тоже посмотрю.

Код в студию:

<div style="border:1px solid;max-width:60%;min-width:200px;background: yellow;margin-bottom:20px;padding-left:50px;">
  <a style="display:inline-block;*display:inline;*zoom:1;background: green;width:45px;height:45px;vertical-align:middle;position: relative;left:-50px;margin-right:-50px;"> </a>
  <a style="display:inline-block;*display:inline;*zoom:1;background: red;vertical-align:middle;">Академия занимательных наук. География</a>
</div>

<div style="border:1px solid;max-width:60%;min-width:200px;background: yellow;margin-bottom:20px;padding-left:50px;">
  <a style="display:inline-block;*display:inline;*zoom:1;background: green;width:45px;height:45px;vertical-align:middle;position: relative;left:-50px;margin-right:-50px;"> </a>
  <a style="display:inline-block;*display:inline;*zoom:1;background: red;vertical-align:middle;min-width:130px;">самба</a>
</div>