Вертикальное выравнивание текста в блоках

12 3
B
На сайте с 10.01.2012
Offline
42
1636

Здравствуйте уважаемые вебмастера!

Подскажите, как выровнять текст в блоке по вертикали?

Сейчас выглядит так:

Uploaded with ImageShack.us

В коде так:


<div class="sidebar" id="sideLeft">
<a class="button" href="/stellazhi-polochnye/">Полочные стеллажи</a>
<a class="button" href="/palletnye-stellazhi/">Паллетные стеллажи</a>
<a class="button" href="/palletnye-stellazhi/">Паллетные стеллажи</a>

В CSS так:

.button {

text-align: center;
width:185px;
height:59px;
background-image:url(/images/buttoff.jpg);
background-repeat:no-repeat;
margin-left:25px;
}

#sideLeft a {
display:block;
text-decoration:none;
color:white;
margin-top:-3px;
}

Спасите друзья!

Geers
На сайте с 12.04.2011
Offline
480
#1

Уберите отсюда:

#sideLeft a {
display:block;
text-decoration:none;
color:white;
margin-top:-3px;
}

Эту строку:

margin-top:-3px;

И эту:

display:block;
FernandoDiaz
На сайте с 23.01.2012
Offline
13
#2

Как вариант:

display: table-cell;
vertical-align: middle;
Geers
На сайте с 12.04.2011
Offline
480
#3

И можно добавить то что написал FernandoDiaz.

B
На сайте с 10.01.2012
Offline
42
#4

Убрал, вот что получилось:😕

Uploaded with ImageShack.us

---------- Добавлено 13.05.2012 в 22:10 ----------

Geers:
И можно добавить то что написал FernandoDiaz.

Добавил, но всё так и осталось как на предыдущем скрине:(

Geers
На сайте с 12.04.2011
Offline
480
#5

brokkoli, помоему так красивее) зато необычно) 😂

Скиньте лучше линк, можно в лс.

B
На сайте с 10.01.2012
Offline
42
#6
Geers:
brokkoli, помоему так красивее) зато необычно) 😂
Скиньте лучше линк, можно в лс.

=) http://psk-in.ru

Geers
На сайте с 12.04.2011
Offline
480
#7

Попробуйте это оставить:

display:block;

А это удалить:

margin-top:-3px;

FernandoDiaz
На сайте с 23.01.2012
Offline
13
#8
Geers:
brokkoli, помоему так красивее) зато необычно) 😂
Скиньте лучше линк, можно в лс.

😂 +1

brokkoli, в <li> ссылки оберните

#sideLeft a {

vertical-align: middle;
text-decoration: none;
color: white;
display: table-cell;
}

<div class="sidebar" id="sideLeft">


<h2>Продукция:</h2>
<li><a class="button" href="/stellazhi-polochnye/">Полочные стеллажи</a></li>
<li><a class="button" href="/palletnye-stellazhi/">Паллетные стеллажи</a></li>
<li><a class="button" href="/palletnye-stellazhi/">Паллетные стеллажи</a></li>
<li><a class="button" href="/gruzovie-stellaji/">Грузовые стеллажи</a></li>
<li><a class="button" href="/stellazhi-konsolnii/">Консольные стеллажи</a></li>
<li><a class="button" href="/universalnye-serii-kombi/">Универсальные стеллажи</a></li>
<li><a class="button" href="/peredvizhnye-stellazhi/">Передвижные стеллажи</a></li>
<li><a class="button" href="/mezonin/">Мезонин</a></li>
<li><a class="button" href="/stellazhi-dlja-doma/">Металлические стеллажи для дома</a></li>
<li><a class="button" href="/torgovie-stellaji/">Торговые стеллажи</a></li>
<li><a class="button1" href="/nashi-stellazhi/">Еще стеллажи</a></li>
<li><a class="button1" href="/produktsija/">Еще продукция</a></li>
<li><a class="button" href="/stati/">Информация</a></li>
</div>
Geers
На сайте с 12.04.2011
Offline
480
#9

это как у вас так получилось?

<div class="sidebar" id="sideLeft">

и класс и id вместе? и не родитель никто, и у кнопок левый класс.

тут полностью код сначала надо менять

B
На сайте с 10.01.2012
Offline
42
#10
FernandoDiaz:
😂 +1



brokkoli, в <li> ссылки оберните

Обернул, не помогает. Может у вас есть пример кнопок такого типа, а то уже шиза какая то в голове начинается))

---------- Добавлено 13.05.2012 в 22:54 ----------

Geers:
это как у вас так получилось?
<div class="sidebar" id="sideLeft">

и класс и id вместе? и не родитель никто, и у кнопок левый класс.
тут полностью код сначала надо менять

Изначально шаблон составлялся через генератор csstools и там у них такая шляпа...

Почему не родитель никто? И почему класс левый?

Извините, что вопросом на вопрос, но правда не понял.=)

Как сделать для кнопок родной класс?

12 3

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