Issue to place 2 lines of text in a circle

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/

enter image description here

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

Have a look at: http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — Hashem Qolami, Oct 27 '14 at 11:56

score 2 · Answer 1 · answered Oct 27 '14 at 11:28

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

score 0 · Answer 2 · answered Oct 27 '14 at 11:19

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>

score 0 · Accepted Answer · answered Oct 27 '14 at 11:26

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>

Issue to place 2 lines of text in a circle

3 Answers3

Working Example