Issue to place 2 lines of text in a circle - html

Question

I'd like to place a seconf line of text below the word "State". For some reason the second line of text ("of mind" in red) is placed way below the circle. Do you know what is causing this huge gap and how to fix it? Use of was not appropriate? Thanks
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

I would suggest a slightly improved structure without any bare text nodes.
JSfiddle
HTML
NB. No break tags needed.
<div class="circle text color-2 color2-box-shadow">
<div class="text-wrap">
<span>State</span>
<span>of Mind</span>
</div>
</div
With this 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

The line-height vertical center technique doesn't work with multiple lines of text.
If the height and width of the circle are fixed, then create some of the height with the top and bottom padding to center the text in the middle.
The <br> can be removed if the span is given display: block.
Working Example
.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
}
<div class="circle text color-2 color2-box-shadow">
State <span>of Mind</span>
</div>

Answer 3

This may help:
.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>