如何在转盘上居中箭头

Question

我的帖子旋转木马侧面有两个箭头。对于这些箭头，我有一个圆形的背景。我无法弄清楚如何将箭头置于圆圈内。有谁知道我怎么能做到这一点。以下是目前状态截图的链接 -

这是我的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

没有你的标记，这是一个有根据的猜测，但看了owl carousel demo后，我相信我可以提供帮助。

这个元素在这个CSS中解决（来自你的问题）：

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

假设您的箭头是文字而不是图片，那么您需要做的就是为您的css添加行高：

line-height: 40px; /* adjust as needed */

注意，如果您支持IE7，我建议您停止。 IE7已经死了一段时间，并不值得努力。

修改CSS以使箭头垂直居中：

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

另请注意，您的CSS可以简化 - 您的owl-prev和owl-next CSS与.owl-theme .owl-controls .owl-buttons div css相同/冲突。