css - 使用 bootstrap - 文本在浏览器调整大小时匹配父 div 宽度

Question

我正在使用 Bootstrap 并且我有一个与计时器背景中心对齐的背景 img。我希望将潜台词和大文本的宽度更改为计时器背景的 100%，以便我可以将它们居中对齐。

HTML:

<div class='col-xs-4'>
    <div class='borders timer-background'>
            <span class='subtext'>june</span><span class="big-text">05</span>
    </div>
</div>

CSS:

.timer-background {
     background: url(../assets/timer_background.png) center center no-repeat;
}

.big-text {
     font-family: 'Tulpen One', cursive;
     color: #ffffff;
     font-size: 120px;
   }

Answer 1

我认为这里有几篇 Stackoverflow 文章可以为您指明正确的方向。

How can I vertically center text over a responsive image?

How to create responsive text on top of an image?

Text vertically and horizontally centered over a responsive image

希望这对事业有所帮助。