Html 问题：将两行文字放在一个圆圈中

我想在单词“State”下面放一行文字。出于某种原因，第二行文字（“红色的心灵”）位于圆圈下方。你知道是什么导致了这个巨大的差距，以及如何解决它吗？使用
不合适？谢谢

HTML

这可能有助于：

.circle{
边界半径：50%；
浮动：左；
显示：内联块；
右边距：20px；
/*文本样式*/
字体大小：45px；
宽度：220px；
高度：220px；
颜色：#FFF；边框：2倍纯色#FFF；
线高：100px；
文本对齐：居中；
字体系列：Arial；
}
.color-1{背景：#DD4814；}
.color-2{背景：#AEA79F；}
.color-3{背景：#5E2750；}
.color1盒影{盒影：0px 0px 1px 1px#DD4814}
.color2盒影{盒影：0px 0px 1px 1px#AEA79F}
.color3盒影{盒影：0px 0px 1px 1px#5E2750}
.圆span{
颜色：红色；
字体大小：22px；
}

心境

行高垂直居中技术不适用于多行文本

如果圆的高度和宽度是固定的，那么创建一些与顶部和底部填充的高度，以中间的文本为中心。

如果给定范围，则可以删除

工作示例

.circle{
边界半径：50%；
浮动：左；
显示：内联块；
右边距：20px；
/*文本样式*/
字体大小：45px；
宽度：220px；
高度：80px；
填充：70px0；
颜色：#FFF；
边框：2倍实心#fff；
文本对齐：居中；
字体系列：Arial；
}
.color-1{
背景#DD4814；
}
.color-2{
背景：AEA79F；
}
.color-3{
背景：#5E2750；
}
.color1盒阴影{
盒影：0px 0px 1px 1px#DD4814
}
.color2盒阴影{
盒影：0px 0px 1px 1px#AEA79F
}
.3色盒阴影{
盒影：0px 0px 1px 1px#5E2750
}
.圆跨度{
颜色：红色；
字体大小：22px；
显示：块
}

心境

我建议在没有任何裸文本节点的情况下稍微改进结构

HTML

注意。不需要中断标签

---

这是由怪物的线条高度引起的。请看：

<div class="circle text color-2 color2-box-shadow">
    State<br> <span>of Mind</span>
</div>

.circle {
    border-radius: 50%;
    float: left;
    display: inline-block;
    margin-right: 20px;
    /* text styling */
    font-size: 45px;
    width: 220px;
    height: 220px;
    color: #FFF;  border: 2px solid #fff;
    line-height: 220px;
    text-align: center;
    font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.circle span { 
color: red;
    font-size: 22px;
}

<div class="circle text color-2 color2-box-shadow">
    <div class="text-wrap"> 
        <span>State</span> 
        <span>of Mind</span>
    </div>
</div

.circle {
    border-radius: 50%;
    float: left;
    display: inline-block;
    margin-right: 20px;
    /* text styling */
    font-size: 45px;
    width: 220px;
    height: 220px;
    color: #FFF;
    border: 2px solid #fff;
    text-align: center;
    font-family: Arial;
    position: relative;
}
.color-1 {
    background: #DD4814;
}
.color-2 {
    background: #AEA79F;
}
.color-3 {
    background: #5E2750;
}
.color1-box-shadow {
    box-shadow: 0px 0px 1px 1px #DD4814
}
.color2-box-shadow {
    box-shadow: 0px 0px 1px 1px #AEA79F
}
.color3-box-shadow {
    box-shadow: 0px 0px 1px 1px #5E2750
}
.text-wrap {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.text-wrap span {
    display: block;
}
.circle span:nth-child(2) {
    color: red;
    font-size: 22px;
}