如何在帖子傳送帶上居中箭頭

Question

我的帖子傳送帶在側面有兩個箭頭。我有這些箭頭的圓形背景。我無法弄清楚如何將箭頭集中在圓圈內。有誰知道我該如何做到這一點。這裏是鏈接到它目前看起來像一個屏幕截圖 -

，這裏是我的CSS

/* 
 
* \t Owl Carousel Owl Demo Theme 
 
* \t v1.3.3 
 
*/ 
 

 
.owl-theme .owl-controls{ 
 
\t margin-top: 50px; 
 
\t text-align: center; 
 
} 
 

 
/* Styling Next and Prev buttons */ 
 

 
.owl-theme .owl-controls .owl-buttons div{ 
 
\t color: #FFF; 
 
\t display: inline-block; 
 
\t zoom: 1; 
 
\t *display: inline;/*IE7 life-saver */ 
 
\t margin: 5px; 
 
\t padding: 3px 10px; 
 
\t font-size: 12px; 
 
\t -webkit-border-radius: 30px; 
 
\t -moz-border-radius: 30px; 
 
\t border-radius: 30px; 
 
\t background: #869791; 
 
\t filter: Alpha(Opacity=50);/*IE7 fix*/ 
 
\t 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{ 
 
\t filter: Alpha(Opacity=100);/*IE7 fix*/ 
 
\t opacity: 1; 
 
\t text-decoration: none; 
 
} 
 

 
/* Styling Pagination*/ 
 

 
.owl-theme .owl-controls .owl-page{ 
 
\t display: inline-block; 
 
\t zoom: 1; 
 
\t *display: inline;/*IE7 life-saver */ 
 
} 
 
.owl-theme .owl-controls .owl-page span{ 
 
\t display: block; 
 
\t width: 12px; 
 
\t height: 12px; 
 
\t margin: 5px 7px; 
 
\t filter: Alpha(Opacity=50);/*IE7 fix*/ 
 
\t opacity: 0.5; 
 
\t -webkit-border-radius: 20px; 
 
\t -moz-border-radius: 20px; 
 
\t border-radius: 20px; 
 
\t background: #869791; 
 
} 
 

 
.owl-theme .owl-controls .owl-page.active span, 
 
.owl-theme .owl-controls.clickable .owl-page:hover span{ 
 
\t filter: Alpha(Opacity=100);/*IE7 fix*/ 
 
\t opacity: 1; 
 
} 
 

 
/* If PaginationNumbers is true */ 
 

 
.owl-theme .owl-controls .owl-page span.owl-numbers{ 
 
\t height: auto; 
 
\t width: auto; 
 
\t color: #FFF; 
 
\t padding: 2px 10px; 
 
\t font-size: 12px; 
 
\t -webkit-border-radius: 30px; 
 
\t -moz-border-radius: 30px; 
 
\t border-radius: 30px; 
 
} 
 

 
/* preloading images */ 
 
.owl-item.loading{ 
 
\t min-height: 150px; 
 
\t 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衝突。