How to center arrow on post carousel


Tags: css,wordpress,owl-carousel

Problem :

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 - screenshot

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;
  }



Solution :

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.


    CSS Howto..

    How to force spaces between 2 elements when position:absolute with CSS only?

    How to overlap a child element of one div with`display:table-cell` over another div with `display:table-cell?`

    How to add drop down menu using CSS?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to display two images on the same line (CSS)

    How to implement block style for list

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    How can I use :before property to create a square before a span

    How to emulate iOS style dropdown menus with html, css, javascript/jquery?

    Data Tables in tabPanel output from navPanel in Shiny: How to change background colors using CSS

    How to test browser performance of specific CSS property?

    Show Feed in two columns in HTML

    How to change the scrolling text in CSS or JQuery

    How do I center a background image to its parent element?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How to override Liferay core' css?

    how to make dropdown using html and css?

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How to achieve this CSS layout? [closed]

    How to display css multiple columns with dynamic height

    Image div showing in Safari, Chrome and IE but not in Firefox

    Box-shadow is overlapping other elements, how can I fix it?

    how to change properties of a parent div on hover of child div

    How to stop grunt compass task compiling sass files intended for include

    How to reach CSS zen?

    How to style a tag for current div with css?

    How to animate transitions triggered by links

    CSS opacity, how to have opaque elements in transparent container element

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?