css - 文本和按钮的响应式垂直对齐

Question

当屏幕尺寸缩小/扩大时，我无法确保我的文本和 Bootstrap 按钮保持在 Bootstrap 行的垂直中间。必须有一种简单的方法来实现这一目标......

<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>

这是一把 fiddle https://jsfiddle.net/74vsr332/

文本在 xs View 中隐藏。

Answer 1

要在 Bootstrap 中执行此操作，您可以结合使用 Flexbox 和媒体查询，并在 min-width: 768 时添加规则，因为您使用的是 sm DEMO

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