How to center arrow on post carousel - css

Question

My post carousel has two arrows on the side. I have a background in the shape of a circle for these arrows. I can't figure out how to center the arrows inside the circles. Does anyone know how I could do this. Here is the link to a screenshot of what it currently looks like -
Here is my css
/*
* Owl Carousel Owl Demo Theme
* v1.3.3
*/
.owl-theme .owl-controls{
margin-top: 50px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* preloading images */
.owl-item.loading{
min-height: 150px;
background: url(AjaxLoader.gif) no-repeat center center
}
/* Navigation */
.owl-prev, .owl-next {
position:absolute;
top:45%;
padding: 5px;
margin:0;
z-index:100;
font-size:3rem;
cursor:pointer;
color:#000000;
}
.owl-prev {
left:20px;
opacity: 1 !important;
}
.owl-next {
right:20px;
opacity: 1 !important;
display: block;
}
.owl-theme .owl-controls .owl-buttons div{
color: #555;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
font-size: 3rem;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffffff;
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
margin-top:-32px;
width:40px;
height:40px;
}
.owl-theme .owl-controls .owl-buttons div:hover {
color:#000000;
opacity: 1 !important;
}

Answer 1

Without your markup, it's a bit of an educated guess, but after looking at the owl carousel demo, I believe I can help.
The elements are addressed in this CSS (from your question):
.owl-theme .owl-controls .owl-buttons div {
color: #555;
display: inline-block;
/* remove this! */
zoom: 1;
/* and this! */
*display: inline;/*IE7 life-saver */
font-size: 3rem;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffffff;
/* and remove this! */
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
margin-top:-32px;
width:40px;
height:40px;
}
Assuming that your arrows are text and not images, then all you need to do is add line-height to your css:
line-height: 40px; /* adjust as needed */
NOTE, if you're supporting IE7, I would recommend you stop. IE7 has been dead for some time, and is not worth the effort.
Modified CSS to vertically center the arrows:
.owl-theme .owl-controls .owl-buttons div {
color: #555;
display: inline-block;
font-size: 3rem;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ffffff;
opacity: 1;
margin-top:-32px;
width:40px;
height:40px;
line-height: 40px; /* adjust as needed */
/* may or may not need this */
text-align: center;
}
Also note that your CSS could be simplified - your owl-prev and owl-next CSS is the same / conflicting with the .owl-theme .owl-controls .owl-buttons div css.