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

ProgramBox

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

Post author:admin
Запись опубликована:31 марта, 2023
Post category:Вопросы по программированию

#html #css #geometry

#HTML #css #геометрия

Вопрос:

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

Судя по всему, это не лучшее решение, поэтому мне было интересно, есть ли у вас какие-либо рекомендации, как убедиться, что текст «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>

Ответ №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

1. позвольте мне попробовать. В вашей скрипке кажется, что вы вытолкнули текст DTD / MTD / YTD из поля, возможно, какой-то display: inline-block отсутствует.

2. Я использовал скрипку из вашего поста, ничего не меняя, она уже вынесена за рамки @SNicolaou

Ответ №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>