Текст не выровнен по промежутку

Свойство text-align (center) не работает должным образом для моего текста. У меня есть следующий код:

 <span class = "info">&nbsp;i&nbsp;<span id = "uitleg_itje">Bla bla. 
 </span></span>

И css для класса info:

 .info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

И текущий результат:

Текст не выровнен по промежутку

html css

05.06.2019 07:25

Улучшение производительности загрузки с помощью 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

Вы можете установить div над тегом span. Тогда ваш текст будет в центре.

 .info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

div{
text-align:center;
}

 <div>
 <span class = "info">&nbsp;i&nbsp;<span id = "uitleg_itje">Bla bla. 
 </span></span>
</div>

Вот так. Пролеты являются встроенными и поэтому наследуют ширину от своего содержимого. По умолчанию Div имеет ширину 100%.

— 05.06.2019 07:32

05.06.2019 07:30

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

Это может быть связано с letter-spacing: 4px; Вместо этого и   вы можете попробовать использовать отступы.

.info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  /*letter-spacing: 4px;*/
  padding: 0 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}