ポストカルーセルに矢印をどのように配置するのですか

Question

私のポストカルーセルには、側面に2つの矢印があります。私はこれらの矢のための円の形の背景を持っています。私は円の内側に矢印をどのように配置するかを理解できません。誰も私がこれをどうやってできるか知っていますか？ここでは、現在どのように見えるのスクリーンショットへのリンクです - ここで

は私の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で対処されている：あなたの矢印は、テキストではなく画像であり、そして、あなたがする必要があるすべてはあなたの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; 
} 

：あなたはIE7をサポートしている場合

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

NOTEは、私はあなたをお勧めしますを停止します。 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と競合/同じです。