Html 如何强制文本换行并保持居中定位？

如何使“现在购物”成为两条不同的线并居中

这是我的相关代码：

.popover{
    position: absolute;
    display: none;
    color: white;
    z-index: 1500;
    text-align: center;
    background-color: black;
    font-family: impact;
    text-decoration: none;
    font-size: 50px;
    opacity: .8;
}
.pb1{
    bottom: 10px;
    width: 260px;
    height: 238px;
}

<div class="popover pb1" ><br/>SHOP NOW</div>

.popover{
位置：绝对位置；
显示：无；
颜色：白色；
z指数：1500；
文本对齐：居中；
背景色：黑色；
字体系列：影响；
文字装饰：无；
字体大小：50px；
不透明度：.8；
}
.pb1{
底部：10px；
宽度：260px；
高度：238px；
}

立即购物

我会添加一个

span

标签。检查解决方案。

添加以下样式

.pb2{
    margin-top: 50px;
}

将内容更改为这样

<div class="popover pb1" >
    <div class="pb2">SHOP<br /> NOW</div>
</div>​

立即购买

​

谢谢！你一回答我就明白了；）