Hello. Please tell me, how in this case is it possible to centralize the prev_arrow and next_arrow arrow horizontally inside the prev_history and next_history elements? Tried display: table; margin: 0 auto; , but something does not work ... Tell me how to be in this case. thank

<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" onclick="javascript:history.back();"> <span class="prev_arrow"></span> </div> <div class="next_history" onclick="javascript:history.forward();"> <span class="next_arrow"></span> </div>
  • @aliokero, If you are given a comprehensive answer, mark it as correct (click on the check mark next to the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

You set the .prev_history width and .prev_arrow width. And then you do:

 .prev_arrow { margin: 0 auto; position: relative; }
  • @ navi1893, there floaty, it does not help. - etki
  • @Etki, floats with fixed positioning are nonsense. ;) Along the way, I generally [I do not understand what the problem is] [1]. Well, maybe what I wouldn’t set as a percentage, and so ... [1]: jsfiddle.net/mq7prtht/1 - Deonis
  • Thank. I tried to set a fixed width, change the positioning of the arrows - not rolled. (Maybe there are more options? - aliokero