0
yüksekliğine göre ortalayın Okları ana kabın yüksekliğini temel alarak ortada yerleştirildiği gibi bir görüntüyü güvenilir bir şekilde denemeye çalışıyorum. ortada okları koyamayan Im, ben de (http://fortawesome.github.io/Font-Awesome/ itibaren)Bir çocuğun merkezi css
simgenin yüksekliğini artırmak edemez gerçeği dışında
Ancak bu defa fark var ne :
.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>
Yardımlarınız için teşekkürler. Şimdi çalışıyor ama Iam simgelerin yer aldığı açıklığın yüksekliğini hala arttıramıyor. Lütfen bu sorunu çözmeme yardımcı olun. –
Üzgünüm,% 100 emin değilim. – Lewis
Hala ön/sonraki düğmelerin yüksekliğini artırmadım –