在另一个div的垂直中心放置div sibiling

我在使用bootstrap 4和owl carousel 2的网站上创建幻灯片。我是否需要将导航放在幻灯片上，请参阅我的代码如下：在另一个div的垂直中心放置div sibiling

注意：我需要在一个容器内进行导航才能获得窗口宽度的100％。

HTML

<section class="slide"> 
    <div class="owl-carousel"> 
     <div class="item"><img src="/img/laminas/lamina-01.jpg"></div> 
     <div class="item"><img src="/img/laminas/lamina-01.jpg"></div> 
    </div> 
    <div class="container"> 
     <div class="nav-container"></div> 
    </div> 
</section>

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    items:1, 
    autoplay:true, 
    autoplayHoverPause:true, 
    nav:true, 
    navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'], 
    navContainer:'.nav-container' 
})

来源

2016-04-21 Angelo Merlo

你可以张贴你的css – Stanley

<section class="slide"> 
    <div class="owl-carousel"> 
     <div class="item"><img src="/img/laminas/lamina-01.jpg"></div> 
     <div class="item"><img src="/img/laminas/lamina-01.jpg"></div> 
    </div> 
    <div class="slide-content"> 
     <div class="container"> 
      <div class="nav-container"></div> 
     </div> 
    </div> 
</section> 

.slide { 
    position: relative; 
} 
.slide .slide-content { 
    position: absolute; 
    top: 50%; 
    transform: translate(0, -50%); 
    left: 0; 
    right: 0; 
    z-index: 9999; 
}

这会将导航置于幻灯片的中心。如果你想在底部调整以适应

来源

2016-04-21 01:37:50

@Angelo Merlo很高兴我能够帮助:)将欣赏一个投票，让人们可以看到正确的答案 –

我会建议使用flexbox CSS这一点。 justify-content: center将水平对齐，并且align-content: center或align-items: center将垂直居中。

来源

2016-04-21 01:01:15

没有你的CSS，我猜这里有点，但我放了一个快速的例子，以显示如何设置导航不能拉伸100％的宽度;

http://jsfiddle.net/8qhfj6u2/

HTML

<div class="owl-carousel"> 
    <div class="item"><h4>1</h4></div> 
    <div class="item"><h4>2</h4></div> 
    <div class="item"><h4>3</h4></div> 
    <div class="item"><h4>4</h4></div> 
    <div class="item"><h4>5</h4></div> 
</div> 
<div class="container"> 
    <div class="nav-container"></div> 
</div>

CSS

body{ 
    background: #ccc; 
} 

.owl-carousel .item { 
    height: 10rem; 
    background: #4DC7A0; 
    padding: 1rem; 
} 
.container{ 
    height: 300px; 
    width: 400px; 
    margin: 0 auto; 
    background: #000; 
    display: flex; 
    align-items: center; 
} 
.nav-container{ 
    background: #fff; 
    width: 300px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    padding: 5px; 
}

的JavaScript

$(document).ready(function() { 
    $('.owl-carousel').owlCarousel({ 
     loop:true, 
     items:1, 
     autoplay:true, 
     autoplayHoverPause:true, 
     nav:true, 
     navText:['<div class="prev">Previous</div>','<div class="next">Next</div>'], 
     navContainer:'.nav-container' 
    }) 
});

来源

2016-04-21 01:51:33 Stanley

在另一个div的垂直中心放置div sibiling

回答

相关问题