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

Как выровнять теги <a> в блоке по вертикали.

Р
На сайте с 07.02.2013
Offline
174
рецидивист
14379

Приветствую.

Вопрос в заголовке.

Приведу пример:

есть таблица высотой 200px, в ней от содержится от 1-ой до 10-ти ссылок, ссылки наделены свойством display:block, все они автоматически выравниваются по вертикали в ячейке в не зависимости от их количества.

Вопрос: как выровнять ссылки по вертикали не в таблице, а в блоке <div> в не зависимости от их количества?

samimages
На сайте с 31.05.2009
Offline
427
samimages
#1

vertical-align:middle; - для блока естественно

Опыт как иммунитет — приобретается в муках! Хостинг: экономия до 1300 руб + домен в подарок ( https://clck.ru/XLscf ) / Аудит семантики от 15К [долго] - ЛС
Р
На сайте с 07.02.2013
Offline
174
рецидивист
#2
samimages:
vertical-align:middle; - для блока естественно

Сколько раз я пробовал - эта тема у меня не работает.

Вот код:

<head>

<style type="text/css">
.xxx {
	border:1px solid;
	padding:10px;
	margin:10px;
	height:200px;
	vertical-align: middle;
}
a{
	display: block;}
</style>

</head>

<body>

<div class="xxx">
<a href="я">111</a>
<a href="я">222</a>
<a href="я">333</a>
<a href="я">444</a>
<a href="я">555</a>
</div>

</body>

Что не так?

RO
На сайте с 18.06.2010
Offline
102
rod-on
#3

рецидивист, вертикал алижен не работает для блоков. Задайте вашему div'у:

Display: table-cell;

vertical-align:middle;

Так будет работать

Самая трендовая ПП года - билеты на автобус (/ru/forum/885898)
Р
На сайте с 07.02.2013
Offline
174
рецидивист
#4
rod-on:
рецидивист, вертикал алижен не работает для блоков. Задайте вашему div'у:
Display: table-cell;
vertical-align:middle;

Так будет работать

Спасибо. Жаль для до IE8 не работает.

Есть к/н костыли?

bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#5
рецидивист:
Спасибо. Жаль для до IE8 не работает.
Есть к/н костыли?

попробуйте погулять с line-height, но не уверен.

Нужен прогер на php+mysql+понимание чужего кода? (/ru/forum/540660) Вам сюда PHP-шаман (http://php-shaman.pw/)
P
На сайте с 13.09.2013
Offline
39
provice
#6

Все эти фишки не будут работать в IE и манипуляции с display || vertical-align весьма не желательны в принципе.

Делать надо так

.xxx {
border:1px solid;
height:200px;
line-height:200px; /*бинго*/
}

====

или для извращенцев

.xxx {
height:200px;
position:relative;
}
.xxx a {
position:absolute;
top:50%;
height:13px; line-height:13px; /*размер шрифта*/
margin-top:-13px;
}
elina732
На сайте с 26.04.2013
Offline
12
elina732
#7

Если вопрос с высоте, то тогда не проще ли будет сократить/увеличить кол-во ссылок? А про выравнивание - не забывайте о наследовании в css

Р
На сайте с 07.02.2013
Offline
174
рецидивист
#8
provice:
Все эти фишки не будут работать в IE и манипуляции с display || vertical-align весьма не желательны в принципе.

Делать надо так


====
или для извращенцев

ну, это годится только для одной записи с заранее известной высотой, а не для случайного количества.

---------- Добавлено 27.10.2013 в 09:37 ----------

elina732:
Если вопрос с высоте, то тогда не проще ли будет сократить/увеличить кол-во ссылок? А про выравнивание - не забывайте о наследовании в css

Не понял вас. Объясните?

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