0
我試着像以下箭頭放置在中間的顯示器一樣根據主容器的高度進行顯示。以css中父級的高度爲中心兒童
除了一個事實，即林無法放置箭頭在中間，我也不能增加圖標的高度（從http://fortawesome.github.io/Font-Awesome/）
但是這是我迄今實現：
.container {
\t width: 90%;
\t margin: 0 auto;
}
/*Text over image*/
h2.header {
bottom: 0;
position: absolute;
text-align: center;
\t margin: 0;
width: 100%;
background-color: rgba(0,0,0,0.7);
\t padding: 35px 0px 35px 0px;
\t font-family: FeaturedItem;
}
.item {
position: relative;
\t width: 100%;
}
.item img {
display: block;
max-width:100%;
}
.item .overlay {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
color:white;
}
/*Carousel Nav Buttons*/
.carousel-nav-left{
\t font-size: 30px;
\t margin-left: -40px;
\t top: 50%;
}
.carousel-nav-right{
\t font-size: 30px;
\t margin-right: -40px;
\t top: 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>owlcarousel</title>
\t \t <meta charset="UTF-8" />
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
\t \t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
\t
<body>
\t \t <div class="container">
\t \t \t <div class="carousel">
\t \t \t
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="images/2.jpg" alt="" />
\t \t \t \t \t
\t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="images/1.jpg" alt="" />
\t \t \t \t \t
\t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="images/3.jpg" alt="" />
\t \t \t \t \t
\t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="images/4.jpg" alt="" />
\t \t \t \t \t
\t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="images/5.jpg" alt="" />
\t \t \t \t \t
\t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="images/6.jpg" alt="" />
\t \t \t \t \t
\t \t \t \t \t <div class="overlay">
\t \t \t \t \t \t <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
\t \t <script src="js/owl.carousel.min.js"></script>
\t \t <script>
\t \t \t (function($){
\t
\t \t \t \t $('.carousel').owlCarousel({
\t \t \t \t \t items: 3,
\t \t \t \t \t loop:true,
\t \t \t \t \t margin:10,
\t \t \t \t \t nav:true,
\t \t \t \t \t navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
\t \t \t \t \t dots: true,
\t \t \t \t \t responsive:{
\t \t \t \t \t \t 0:{
\t \t \t \t \t \t \t items:1
\t \t \t \t \t \t },
\t \t \t \t \t \t 430:{
\t \t \t \t \t \t \t items:2
\t \t \t \t \t \t },
\t \t \t \t \t \t 800:{
\t \t \t \t \t \t \t items:3
\t \t \t \t \t \t },
\t \t \t \t \t \t 1400:{
\t \t \t \t \t \t \t items:4
\t \t \t \t \t \t },
\t \t \t \t \t \t 1800:{
\t \t \t \t \t \t \t items:6
\t \t \t \t \t \t },
\t \t \t \t \t \t 2400:{
\t \t \t \t \t \t \t items:7
\t \t \t \t \t \t },
\t \t \t \t \t \t 3000:{
\t \t \t \t \t \t \t items:9
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t })
\t \t \t \t
\t \t \t })(jQuery);
\t \t </script>
\t </body>
</html>
感謝您的幫助。它現在正在工作，但Iam仍然無法增加我的圖標所在的跨度高度。請幫我解決這個問題。 –
對不起，我不是100％確定你的意思。 – Lewis
我仍然無法增加prev/next按鈕的高度 –