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

问题描述

我试图将这些文本的背景颜色垂直居中。 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>

非常感谢！！

解决方法

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

.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>