Центрирование изображений по горизонтали и вертикали в пределах ширины и высоты

Question

Мне нужно расположить стрелки вперед и назад по обеим сторонам изображения в пределах большего деления. Ширина и высота div зависят от размера изображения.

Пока у меня есть живая версия моей работы: http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html

А вот jsfiddle для игры: http://jsfiddle.net/thwackukulele/4zHyd/ Хотя я не знаю, насколько это будет полезно без ссылок на изображения.

Вы увидите стрелки вперед и назад вверху синей области по обе стороны от изображения. Я хочу, чтобы они были центрированы по горизонтали и вертикали в этой синей области.

Я знаю, что я использую много позиционирования, и если есть лучший способ атаковать этот макет, пожалуйста, дайте мне знать. Это лучшее, что я мог придумать. В конечном итоге я передаю эти макеты разработчику, который добавляет функциональность CMS для базы данных. Так что мой код не должен быть идеальным, он просто должен иллюстрировать мои намерения, чтобы он мог понять.

Спасибо за любую помощь заранее!

Answer 1

.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}

Answer 2

Решение заключается в абсолютном расположении ссылок на div на 50% сверху и на полях сверху отрицательной половины высоты ссылки так:

http://jsfiddle.net/elclanrs/JKqnm/

html:

<div>
    <img />
    <a id="next"></a>
    <a id="prev"></a>
</div>

css:

div {
    position: relative;
    height: 300px; /* Set size */
    width: 500px;
    background: blue;
}
#prev, #next {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    background: red;
}
#prev {
    left: -48px;
}
#next {
    right: -48px;
}

Answer 3

Не уверен, что я понимаю вопрос, это много кода для чтения, может быть, только разместить код в области фокусировки.

Попробуйте:

.wrapper{
       position:relative;
    }
    .left_arrow{
       position:absolute;
       left:0;
       top:50%;
    }
    .right_arrow{
       position:absolute;
       right:0;
       top:50%;
    }