Bootstrap 4 Beta - 只有文本和标题文本的传送带垂直对齐中间

Question

我想知道如何去使用新的BootStrap传送带但只有文本&标题文本垂直对齐中间？

任何想法如何做到这一点？每当我从旋转木马中移除'img'时，幻灯片都会消失。

我喜欢新的Bootstrap，但很难找出东西。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 
    <div class="carousel-item active"> 
     <img class="d-block w-50" src="" alt="First slide"> 
     <div class="carousel-caption"> 
     <h3>Boyd W.</h3> 
     <p>TEXT</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block w-50" src="" alt="First slide"> 
     <div class="carousel-caption"> 
     <h3>Diane L</h3> 
     <p>TEXT</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block w-50" src="" alt="First slide"> 
     <div class="carousel-caption"> 
     <h3>Randall L</h3> 
     <p>TEXT</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block w-50" src="" alt="First slide"> 
     <div class="carousel-caption"> 
     <h3>John D.</h3> 
     <p>TEXT</p> 
     </div> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block w-50" src="" alt="First slide"> 
     <div class="carousel-caption"> 
     <h3>Jody B.</h3> 
     <p>TEXT</p> 
     </div> 
    </div> 
    </div> 
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

Answer 1

您需要给旋转木马内部一个高度。

.carousel-inner{ 
    height: 100px; 
} 
.carousel-caption{ 
    top: 50%; 
} 

这里有一个工作codepen：

https://codepen.io/Washable/pen/Oxqjbq?editors=1100