響應垂直對齊的文本和按鈕

Question

我在確保我的文本和引導按鈕保持在我的引導行垂直中間時遇到了一些麻煩，因爲屏幕大小減小/擴大。必須有一個簡單的方法來實現這一目標？

<div class="cta-promo"> 
    <div class="container"> 

    <div class="row"> 

     <div class="hidden-xs col-sm-7 col-md-7 col-lg-8"> 
     <p class="cta-promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere pharetra rhoncus. Sed et lorem vehicula, tincidunt quam at, pharetra nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget mollis magna, a fermentum mauris. Mauris orci neque, egestas nec diam nec, vestibulum vestibulum nibh.</p> 
     </div> 

     <div class="col-xs-12 col-sm-offset-1 col-sm-4 col-md-offset-1 col-md-4 col-lg-offset-1 col-lg-3"> 
     <button>Apply for this today</button> 
     </div> 
    </div> 

    </div> 

這裏有一個小提琴https://jsfiddle.net/74vsr332/

文本被隱藏在XS查看。

Answer 1

爲此在引導你可以結合Flexbox和媒體查詢，並添加規則時min-width: 768因爲你使用smDEMO

@media(min-width: 768px) { 
    .flex { 
    display: flex; 
    align-items: center; 
    } 
}