在响应式 Div 中垂直对齐文本

Question

我正在尝试为我们使用 Bootstrap 框架的网站创建促销框。

我想要一个带有背景图像的 div 来容纳垂直对齐的内容。我相信我已经部分成功了，当 div 的宽度变得大于我为背景图像大小设置的数量时，就会出现问题。有什么解决方法吗？

例如，在列宽为 6 时，div 的宽度为 455px，但在某些断点期间，div 变得比这更宽，但文本内容仍然认为它是 455px。

这是我的html：

<div class="col-md-6 col-sm-6">
    <div class="promo-box01">
        <div class="promo-text">
            <h3>CTA</h3>
            <p>Limited time sale $45.00</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
        </div>    
</div>
</div>

这是我的 CSS：

.promo-box01 {
background-image:url('../images/promo1.jpg');
background-size: cover;
width:100%;
height:150px;
background-repeat:none;
text-align: center;
border-radius:3px;
box-shadow: 0 0 4px #888;
}

.promo-box01 .promo-text {
font-family:'Roboto',arial,sans-serif;
color:#FFF;
vertical-align: middle;
width:450px;
height:150px;
line-height:1.5em;
display: table-cell;
}

.promo-text h3 {
font-family:'Anton',arial,sans-serif;
color:#FFF;
font-size:28px;
}

Answer 1

尝试将这些类添加到“promo-box01”：
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;