我怎样才能垂直居中这个背景与里面的文字？答案

【问题标题】：How can i center vertically this background with the text inside?我怎样才能垂直居中这个背景与里面的文字？
【发布时间】：2021-05-15 19:58:38
【问题描述】：

我正在尝试将这些文本的背景颜色垂直居中。 I see this way only on mobile devices: 我在我的电脑上正常看到它。我也在使用@font-face gotham font-family。有谁知道如何解决这个问题？

这是代码：https://jsfiddle.net/demiancurutchet/54mw8gs2/11/

CSS：

.title {
color: #D4145A;
line-height: 1.5;
color: #333;
text-transform: uppercase;
font-size: 2rem;
width: 100%;}
.title span {
width: fit-content;
display: inline-block;
padding: 5px 10px;
align-items: center;}
.bg-violet {
background-color: #662D91;
color:#fff;}

HTML：

<h1 class="title">
    Tu empresa va a <br>
    <span class="bg-violet">incrementar</span> sus <span class="bg-violet">ingresos</span>
</h1>

非常感谢！！

【问题讨论】：

标签： css text center vertical-alignment

【解决方案1】：

如果你想这样试试这个......

.title {
color: #D4145A;
line-height: 1.5;
color: #333;
text-transform: uppercase;
font-size: 2rem;
text-align:center;
width: 100%;}
.title span {
width: fit-content;
display: inline-block;
padding: 5px 10px;
}
.bg-violet {
background-color: #662D91;
color:#fff;}

<h1 class="title">
    Tu empresa va a <br>
    <span class="bg-violet">incrementar</span> sus <span class="bg-violet">ingresos</span>
</h1>

【讨论】：