问题是将2行文本放在一个圆圈中

Question

我想在“State”一词下面放置一行seconf文本。出于某种原因，第二行文字（“红色的”“文字”）位于圆圈下方。你知道造成这个巨大差距的原因以及如何解决这个问题吗？使用
是不合适的？感谢

http://jsfiddle.net/7txCN/26/

HTML

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

CSS：

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

Answer 1

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

JSfiddle

<强> HTML

NB。不需要中断标记。

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

使用此CSS

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

Answer 2

这可能有所帮助：

.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: 100px;
    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">
    State<br> <span>of Mind</span>
</div>

Answer 3

line-height垂直中心技术不适用于多行文字。

如果圆的高度和宽度是固定的，则使用顶部和底部填充创建一些高度，使文本居中于中间。

如果给出范围<br>，则可以删除display: block。

工作示例

＆＃13;

＆＃13;

.circle {
  border-radius: 50%;
  float: left;
  display: inline-block;
  margin-right: 20px;
  /* text styling */
  font-size: 45px;
  width: 220px;
  height: 80px;
  padding: 70px 0;
  color: #FFF;
  border: 2px solid #fff;
  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;
  display: block
}

＆＃13;

<div class="circle text color-2 color2-box-shadow">

  State <span>of Mind</span>

</div>

＆＃13;

＆＃13;

＆＃13;