Struggling to position text inside a circular shape on my website, I've attempted the following:
https://i.sstatic.net/fKOks.jpg
From initial inspection, it seems like there could be a better solution. Do you have any suggestions for ensuring that "LM" or "TM" is perfectly centered within the circle?
Check out the fiddle here: Sample Demo
html:
.performance-box-container {
margin: 5px;
padding: 5px;
}
.performance-box {
width: 120px;
height: 60px;
margin: 0px 5px 5px 0px;
padding: 5px 5px 10px 5px;
border: 2px solid #868686;
background-color: rgba(202, 202, 202, 0.5);
display: inline-block;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
display: inline-block;
}
.performance-box-name-in-circle span {
display: table-cell;
vertical-align: middle;
height: 40px;
width: 40px;
text-align: center;
padding: 0;
margin: 0;
}
.performance-box-stats {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
display: inline-block;
}
.performance-box-stats p {
line-height: 1.5;
margin: 0;
}
.performance-box-stats span.positive {
color: #388C00;
}
.performance-box-stats span.unchanged {
color: #000;
}
.performance-box-stats span.negative {
color: #f00;
}<div class="performance-box-container">
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>TM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
</div>