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

Posted 2023-03-05

【中文标题】我怎样才能垂直居中这个背景与里面的文字？

【英文标题】：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>

非常感谢！！

【参考方案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>