При использовании letter-spacing не получается выровнять текст по центру

Question

Есть logo с большим font-size. Необходимо сделать так же большие отступы между букв. Проблема в том, что текст почему-то смещается влево, а не равномерно распределяя отступы, оставаясь по центру. Прошу помочь, заранее спасибо.

header {
  background-color: red;
}

.container {
  max-width: 1170px;
}

main {
  display: flex;
  justify-content: center;
}

.intro {
  display: flex;
  justify-content: center;
  height: 700px;
  font-size: 450px;
  letter-spacing: 350px;
  color: black;
}

<header>
  TEXT
</header>
<main>
  <div class="container">
    <div class=intro>
      ABC
    </div>
  </div>
</main>

Answer 1

А без оберток не выйдет? Сам хотел так сделать, но - допустим из админки уже не отредактируешь и не введешь больше букв для лого(WorldPress к примеру?).

Тупой вариант, но почему бы и нет?

$('.title').each(function(){
  let len = $(this).text().length,
      textArr = $(this).text().split('');
  $(this)
    .css('--size-text', (100/len)+'vw')
    .html(`<div>${textArr.join('</div><div>')}</div>`);
});

.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: var(--size-text, inherit);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="title">ABC</div>
<div class="title">STACKOVERFLOW</div>

Answer 2

Думаю, если текст однострочный, то добавление свойства text-indent и использование относительных размерных единиц, решит проблему. Запустите код, раскройте на всю страницу, подвигайте ползунок:

* { margin: 0; padding: 0; } body { background: url("https://i.stack.imgur.com/m9NKc.png") 0% 0% no-repeat #eee; } input { display: block; width: 98%; margin: 10px auto; color: #080; } input::before { content: attr(min) 'px'; } input::after { content: attr(data-value) 'px/' attr(max) 'px'; }


header {
  background-color: red;
}
.container {
  max-width: 1170px;
}
main {
  display: flex;
  justify-content: center;
}

.intro {
  display: flex;
  justify-content: center;
  height: 700px;
  color: black;
  font-size: 450px;
  
  letter-spacing: 0.777em;
  text-indent: 0.777em;
}

<header>
  TEXT
</header>
<input type="range" min="12" max="750" value="450" data-value="450" oninput="this.dataset.value = this.value;document.querySelector('.intro').style.fontSize = this.value + 'px';">
<main>
  <div class="container">
    <div class=intro>
      ABC
    </div>
  </div>
</main>

Первая строка в стилях и <input> добавлены исключительно для наглядности и необязательны.

БЛОГ НА HUSL

При использовании letter-spacing не получается выровнять текст по центру

Ответы (2 шт):