Выравнять содержимое div-a

[ХОЛОДный]

Добрый день, есть следующая задача:

в div динамически добавляется n картинок.

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

Получается стандартная листалка превьюшек.

Проблема заключается в следующем:

Высота картинки - 100 пикселей.

Стрелочки надо по высоте равнять по середине картинки, т.е. отступить на 50 пикселей от верхней границы div'a контейнера.

Пробую так:

div id="imgList" style="vertical-align: middle;">
<div id="goLeftArrow" style="margin-left: -3em; margin-right: 2em; display: inline;" onclick="goLeft()">
<a style="text-decoration: none;" href="#">←</a>
</div>
<img style="padding-right: 3em;" src="/images/test/photos_preview/1.jpg"/>
<img style="padding-right: 3em;" src="/images/test/photos_preview/2.jpg"/>
<img style="padding-right: 3em;" src="/images/test/photos_preview/3.jpg"/>
<img style="padding-right: 3em;" src="/images/test/photos_preview/4.jpg"/>
<img style="padding-right: 3em;" src="/images/test/photos_preview/5.jpg"/>
<img style="padding-right: 3em;" src="/images/test/photos_preview/6.jpg"/>
<img style="padding-right: 3em;" src="/images/test/photos_preview/7.jpg"/>
<p id="goRightArrow" style="padding-top: 50px; display: inline;" onclick="goRight()">
<a style="text-decoration: none;" href="#">→</a>
</p>
</div>

Никак не получается выравнять по середине стрелочки goLeftArrow и goRightArrow

Пробовал p,span,div

никак не получается.

Что делать, помогите, пожалуйста.

Никак не получается отравнять по середине.

(опечатка)

Edited January 8, 2010 by ХОЛОДный

[Clayton]

Блоку с картинкой позишн релатив, стрелочкам позишн абсолют, с выравниванием топ 50%

<div style="width:400px; height:400px; background:#000; position:relative;"><span style="color:#fff; position:absolute; top:50%;">Тыц</span><span style="color:#fff; position:absolute; top:50%; right:40%;">Иа Картинко</span><span style=" color:#fff; position:absolute; top:50%; right:2px;">Тыц</span></div>

это первое что в голову пришло, так думаю еще великое множество вариантов можно напридумывать)

[ХОЛОДный]

Блоку с картинкой позишн релатив, стрелочкам позишн абсолют, с выравниванием топ 50%

<div style="width:400px; height:400px; background:#000; position:relative;"><span style="color:#fff; position:absolute; top:50%;">Тыц</span><span style="color:#fff; position:absolute; top:50%; right:40%;">Иа Картинко</span><span style=" color:#fff; position:absolute; top:50%; right:2px;">Тыц</span></div>

это первое что в голову пришло, так думаю еще великое множество вариантов можно напридумывать)

Спасибо, буду пробовать.

[aTei]

Всё намного проще

Задай изображениям vertical-align:middle;

#imgList img {vertical-align:middle;}

[psywalker]

Спасибо, буду пробовать.

Да, и ещё задай отриц.марджины на высоту картинок.