如何将 post 旋转木马上的箭头居中

Question

我的 post 旋转木马的侧面有两个箭头。对于这些箭头，我有一个圆形的背景。我不知道如何将圆圈内的箭头居中。有谁知道我该怎么做。这是 link 的当前截图 -

这是我的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 [=34] 相同/冲突=].

如何将 post 旋转木马上的箭头居中

How to center arrow on post carousel

css

wordpress

owl-carousel