在响应式分区中垂直对齐文本

我正在尝试为我们的网站使用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; 
}

来源

2015-03-31 Patch Leishman

我觉得.promo -box01应显示：表 – 2015-03-31 18:55:44

我想我可能已经找到了解决办法，虽然它可能不是很优雅。通过将.promo-text设置为600px的宽度，它大于任何断点处的div，因此保留居中格式。 – 2015-03-31 19:17:26

尝试增加这些类 “促销-Box01的”：
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

来源

2015-03-31 19:02:17 user3312633

在响应式分区中垂直对齐文本

回答

相关问题