I have a banner that is displayed in a flexslider and I need to leave the navigation arrows centered on the sides, today they are in the base. As much as I change I can not get them centralized, my limited knowledge in css limit me.
The page can be seen here: Flexslider
The css looks like this:
.flex-direction-nav a { display: block; width: 27px; height: 27px; background-image: url(../images/slider/arrows.png); background-repeat: no-repeat; cursor: pointer; text-indent: -999em; } .flex-direction-nav a.flex-prev, .flex-direction-nav a.flex-prev.flex-disabled { background-position: 10px 7px; } .flex-direction-nav a.flex-next, .flex-direction-nav a.flex-next.flex-disabled { background-position: -17px 7px; } .flex-direction-nav a.flex-disabled:link, .flex-direction-nav a.flex-disabled:visited, .flex-direction-nav a.flex-disabled:hover, .flex-direction-nav a.flex-disabled:active { background-color: rgba(0,0,0,0.6); cursor: default; } /* Control Nav */ .flex-control-nav { position: absolute; right: 0; left: 0; margin: 0 auto; width: 70px; bottom: 15px; background-color: rgba(0,0,0,0); padding: 10px 20px; overflow: hidden; z-index: 50; }