Централизовать элемент внутри блока

Рейтинг: 1Ответов: 1Опубликовано: 09.12.2014

Здравствуйте. Скажите, пожалуйста, как в данном случае возможно централизовать стрелку prev_arrow и next_arrow по горизонтали внутри элементов prev_history и next_history? Пробовал display: table; margin: 0 auto; , но что-то не получается... Подскажите, как быть в данном случае. Спасибо

 <style>
    .prev_history{float:left;left:0;position:fixed;display:block;height:100%;width:6%;opacity:0}
    .next_history{float:right;right:0;position:fixed;display:block;height:100%;width:6%;opacity:0}
    .prev_history:hover,.next_history:hover{background:#ececef;opacity:1}
    .prev_arrow{float:left;top:40%;left:0;border-top:25px solid transparent;border-right:50px solid #4c4e5a;border-bottom:25px solid transparent;position:fixed;}
    .next_arrow{float:right;top:40%;right:0;border-top:25px solid transparent;border-left:50px solid #4c4e5a;border-bottom:25px solid transparent;position:fixed}
    </style>
    <div class="prev_history">
       <span class="prev_arrow"></span>
    </div>
    <div class="next_history">
       <span class="next_arrow"></span>
    </div>

Ответы

▲ 1

Задаешь .prev_history ширину и .prev_arrow ширину. А потом делаешь:

.prev_arrow {
    margin: 0 auto;
    position: relative;
}