Css 如何在邮政转盘上居中放置箭头_Css_Wordpress_Owl Carousel

Css 如何在邮政转盘上居中放置箭头

css wordpress

Css 如何在邮政转盘上居中放置箭头,css,wordpress,owl-carousel,Css,Wordpress,Owl Carousel,我的邮政转盘侧面有两个箭头。我有一个圆形的背景用于这些箭头。我想不出如何使箭头在圆圈内居中。有人知道我是怎么做到的吗。以下是它当前外观的屏幕截图链接- 这是我的css /* *猫头鹰旋转木马猫头鹰演示主题 *v1.3.3 */ .owl主题.owl控件{ 边缘顶部：50px；文本对齐：居中； } /*设置下一个和上一个按钮的样式*/ .owl主题.owl控件.owl按钮div{ 颜色：#FFF；显示：内联块；缩放：1； *显示：内联；/*IE7救生圈*/ 保证金：5px；填充：3x1

我的邮政转盘侧面有两个箭头。我有一个圆形的背景用于这些箭头。我想不出如何使箭头在圆圈内居中。有人知道我是怎么做到的吗。以下是它当前外观的屏幕截图链接-

这是我的css

/*
*猫头鹰旋转木马猫头鹰演示主题
*v1.3.3
*/
.owl主题.owl控件{
边缘顶部：50px；
文本对齐：居中；
}
/*设置下一个和上一个按钮的样式*/
.owl主题.owl控件.owl按钮div{
颜色：#FFF；
显示：内联块；
缩放：1；
*显示：内联；/*IE7救生圈*/
保证金：5px；
填充：3x10px；
字体大小：12px；
-webkit边界半径：30px；
-moz边界半径：30px；
边界半径：30px；
背景#869791；
过滤器：Alpha（不透明度=50）；/*IE7修复*/
不透明度：0.5；
}
/*可点击类修复触摸设备悬停问题*/
/*用于非接触式悬停动作*/
.owl主题.owl-controls.clickable.owl按钮div:hover{
过滤器：Alpha（不透明度=100）；/*IE7修复*/
不透明度：1；
文字装饰：无；
}
/*样式分页*/
.owl主题.owl控件.owl页面{
显示：内联块；
缩放：1；
*显示：内联；/*IE7救生圈*/
}
.owl主题.owl控件.owl页面跨度{
显示：块；
宽度：12px；
高度：12px；
利润率：5px7px；
过滤器：Alpha（不透明度=50）；/*IE7修复*/
不透明度：0.5；
-webkit边界半径：20px；
-moz边界半径：20px；
边界半径：20px；
背景#869791；
}
.owl主题.owl控件.owl-page.active span，
.owl主题.owl-controls.clickable.owl页面：悬停范围{
过滤器：Alpha（不透明度=100）；/*IE7修复*/
不透明度：1；
}
/*如果PaginationNumber为true*/
.owl主题.owl控件.owl页span.owl-numbers{
高度：自动；
宽度：自动；
颜色：#FFF；
填充：2x10px；
字体大小：12px；
-webkit边界半径：30px；
-moz边界半径：30px；
边界半径：30px；
}
/*预加载图像*/
.owl-item.loading{
最小高度：150px；
背景：url（AjaxLoader.gif）无重复中心
}
/*航行*/
.owl上一个，.owl下一个{
位置：绝对位置；
最高：45%；
填充物：5px；
保证金：0；
z指数：100；
字体大小：3rem；
光标：指针；
颜色：#000000；
}
.猫头鹰{
左：20px；
不透明度：1！重要；
}
下一个是猫头鹰{
右：20px；
不透明度：1！重要；
显示：块；
}
.owl主题.owl控件.owl按钮div{
颜色：#555；
显示：内联块；
缩放：1；
*显示：内联；/*IE7救生圈*/
字体大小：3rem；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
背景：#ffffff；
过滤器：Alpha（不透明度=100）；/*IE7修复*/
不透明度：1；
边缘顶部：-32px；
宽度：40px；
高度：40px；
}
.owl主题.owl控件.owl按钮div:hover{
颜色：#000000；
不透明度：1！重要；
}

如果没有您的标记，这是一个有点根据的猜测，但在看了之后，我相信我能帮上忙

本CSS中介绍了这些元素（根据您的问题）：

假设您的箭头是文本而不是图像，那么您需要做的就是在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相同/冲突。

没有您的标记，这是一个有点根据的猜测，但是在查看了主题之后，我相信我可以提供帮助