блок с текстом по середине и плюсом "fa fa-plus" справа

Question

Как видите текст не по центру, нужна помощь. Из-за "плюса" текст съезжает левее.

Answer 1

Иконке плюс присвойте position: absolute, тексту установите отступы по бокам соответсвующие размеру иконки, чтобы при изменении размера кнопки не наложились друг на друга.

Answer 2

.elem {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
  background: #857bfe;
  color: #fff;
  padding: 5px;
}

.elem > span {
  display: block;
  width: 100%;
  padding-left: 16px;
  text-align: center;
}

<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet"/>
<div class="elem">
  <span>Название колонки</span>
  <i class="fas fa-plus"></i>
</div>

БЛОГ НА HUSL

блок с текстом по середине и плюсом "fa fa-plus" справа

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