Let centralized Bullets and right and left navigation arrows in slider

Question

I am unsuccessfully tempted to let the navigation Bullets centralized and the navigation arrows on the right and left side of the slider, as much as it changes the css settings do not succeed.

This is the site: Website under development

For the arrows, I have 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;
}

And for the Bullets that:

.flex-control-nav {
    position: absolute;
    left: 0;
    bottom: 15px;
    background-color: rgba(0,0,0,0.8);
    padding: 10px 20px;
    overflow: hidden;
    z-index: 50;
}
.flex-control-nav li {
    margin-left: 8px;
    float: left;
}
.flex-control-nav li:first-child {
    margin: 0;
}
.flex-control-paging a {
    width: 7px;
    height: 7px;
    display: block;
    background-color: #e5e5e5;
    cursor: pointer;
    text-indent: -999em;
}
.flex-control-paging a:hover {
    background-color: #999;
}
.flex-control-paging a.flex-active {
    cursor: default;
}

In the case of the Bullets I tried to change that:

flex-control-nav {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 35px;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 20px;
    position: relative;
    width: 6%;
    z-index: 50;
}

But as I said, unsuccessfully.

Answer 1

You can use the following:

Here the Bullets are centralized by adjusting the properties left and right for 0 and margin for 0 auto. Using this method the width needs to be fixed.

.flex-control-nav {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 70px;
    bottom: 15px;
    background-color: rgba(0,0,0,0.8);
    padding: 10px 20px;
    overflow: hidden;
    z-index: 50;
}

In this part the ideal would be to separate the arrows in HTML and adjust the css accordingly. The code below will work with the current version setting the ul to 100% width and li with position: absolute one on each side.

ul.flex-direction-nav {
    width: 100%;
}

ul.flex-direction-nav li:first-of-type {
    position: absolute;
    left: 0;
}

ul.flex-direction-nav li:last-of-type {
    position: absolute;
    right: 0;
}