CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Issue to place 2 lines of text in a circle

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

Upvotes: 0

Views: 1213

Answers (3)

Paulie_D
Paulie_D

Reputation: 115045

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

Upvotes: 2

misterManSam
misterManSam

Reputation: 24692

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>

Upvotes: 0

chiapa
chiapa

Reputation: 4412

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>

Upvotes: 0

Related Questions