Как лучше выровнять текст внутри круга на 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>

использовать положение: абсолютное

— 08.04.2019 13:25

где я должен это использовать?

— 08.04.2019 14:20

html css geometry

08.04.2019 13:19

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

— 08.04.2019 14:21

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

— 08.04.2019 14:45

08.04.2019 13:27

Ответ принят как подходящий

Используется 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>

это выглядит для меня, чтобы сделать центрирование просто отлично. Однако я не совсем понимаю, какое свойство определяет расстояние круга от верхней границы...

— 08.04.2019 16:57

08.04.2019 15:11