CODEWITHSUNDEEP
htmlcssgeometry
SNicolaou
SNicolaou

Reputation: 550

How to better align text inside a circle in html page using css?

I have been trying to align some text inside a circle in my webpage. So far i have been able to come up with the following:

enter image description here

From looking at it, it's not the best solution so I was wondering if you have any recommendation how to make sure that the text "LM" or "TM" is perfectly centered inside the circle (if that's possible).

Here is the fiddle: 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>

Upvotes: 0

Views: 60

Answers (2)

Xenio Gracias
Xenio Gracias

Reputation: 2758

Used flexbox to display performance-box-name-in-circle and performance-box-stats side by side and used below css to place span in the center of the circle. Hope this helps. thanks

margin: 50%;
display: inline-block;
transform: translate(-50%, -50%);


.performance-box-container {
  margin: 5px;
  padding: 5px;
  display: flex;
}

.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; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.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;
  margin: 50%;
  /* margin-top: 80px; */
  display: inline-block;
  transform: translate(-50%, -50%);
}

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

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

</body>

Upvotes: 0

Marc Hjorth
Marc Hjorth

Reputation: 1950

You can vertically and horizontally align them center using flexbox

display: flex;
justify-content: center;
align-items: center;


.performance-box-name-in-circle,
.performance-box-name-in-circle span {
    display: flex;
    justify-content: center;
    align-items: center;
}

.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;
}
<div class="performance-box-name-in-circle">
  <span>LM</span>
</div>

Here is the Updated JSFiddle

Upvotes: 1

Related Questions