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;

响应区中的垂直对齐文本

1 个答案: