Как лучше выровнять текст внутри круга в HTML-странице с помощью CSS?

Question

Я пытался выровнять текст внутри круга на моей веб-странице. Пока я смог придумать следующее:

Глядя на это, это не лучшее решение, поэтому мне было интересно, если у вас есть какие-либо рекомендации, как убедиться, что текст "LM" или "TM" идеально центрирован внутри круга (если это возможно).

Вот скрипка: Пример демонстрации

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>

Answer 1

Вы можете выровнять их по вертикали и горизонтали, используя 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>

Здесь находится Обновлен JSFiddle

Answer 2

Используется flexbox для отображения performance-box-name-in-circle и performance-box-stats рядом и используется ниже css для размещения span в центре круга.Надеюсь это поможет.спасибо

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>