Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Выровнять все по вертикали

Автор: Lexxx_HU 8.2.2010, 16:16

Здраствуйте все уважаемые форумчане
помогите пожалуйста решить вот такую проблему
первый рисунок что еимеется, второй что хочу получить.

user posted image

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

Код


<div class="news_index_bottom">
<span class="review">
<img src="/images/eye.gif" width="17" height="15"   /> : 142</span>
<span class="more"><a href="/news/detail/1652.html">подробнее ...</a></span>
</div>

Код


.news_index_bottom{ text-align:right; padding:2px; background-color:#0000FF;}
.review { background-color:#ececec; padding:0px; border:1px solid #e0e0e0; margin-right:40px;}
.more a {border:1px solid #e0e0e0;font:normal 12px; color:#999; cursor:pointer; padding:2px 15px 2px 15px;background:#ececec;}
.more a:hover{border:1px solid #000; color:#000}

смысл я думаю понятен, надо чтоб по вертикали все центрально встало, и если можно, напишите где моя ошибка.
Заранее спасибо

Автор: bars80080 8.2.2010, 16:53

в span просто так вкладывать нельзя. замени на div, разметка будет устойчивей и станет отвечать нужным правилам css

Код


.news_index_bottom{ vertical-align: top; text-align:right; padding:2px; background-color:#0000FF;}

помогает?

Автор: Lexxx_HU 8.2.2010, 17:09

Вроде помогло, единственное что осталось, это img прилип к верхней границе спана и ничем его не опустить, вечером попробую с дивами сделать

Автор: SelenIT 9.2.2010, 03:06

Цитата(bars80080 @ 8.2.2010, 16:53

)

в span просто так вкладывать нельзя

Чего, пардон? ;)

По сабжу, должен помочь vertical-align: middle, плюс можно поиграться с line-height. И хорошо бы задать для span-ов display:inline-block, т.к. паддинги для инлайнового элемента — слишком уж ненадежная вещь...

Автор: blah 9.2.2010, 12:52

Цитата(SelenIT @ 9.2.2010, 02:06

)

vertical-align: middle

Скорее vertical-align:text-bottom

Автор: bars80080 9.2.2010, 17:44

Цитата(SelenIT @ 9.2.2010, 02:06

)

Чего, пардон? ;)

просмотрел. показалось, что span в span'е, первый тогда должен был закрыться (насколько помню)

Автор: SelenIT 9.2.2010, 18:08

bars80080, нет, как раз у спанов никакой магии нет, это самый нейтральный строчный элемент. В них только блочного ничего вкладывать нельзя, а строчного, включая другие спаны — сколько угодно.

Автор: Lexxx_HU 11.2.2010, 14:50

vertical align тут не поможет, он опускает/подымает текст поспорительно центральной горизонтальной линии текста, но никак не div элемента. Решил все достаточно просто, просто поместил рисунок в backgraund image. И выровнял с помощью position

Автор: SelenIT 12.2.2010, 03:03

Цитата(Lexxx_HU @ 11.2.2010, 14:50

)

опускает/подымает текст поспорительно центральной горизонтальной линии текста

По высоте контейнера, в общем случае, он действительно не центрирует. Но если текст заведомо состоит из одной строки — можно сделать высоту этой строки (line-height) равной высоте контейнера, и свести задачу к уже решенной ;)