Текст кнопки посередине, значок справа: justify-content

Question

Я использую этот html код из шаблона ниже. Проблема в том, что он использует justify-content для значка и текста.

<button type="submit" class="btn btn-primary btn-block btn-icon-split">
        <span class="icon">
            <i class="fas fa-search"></i>
        </span>
        <span class="text">Search</span>
    </a>
</button>

Мне нужен значок слева и текст по центру.

.btn-icon-split {
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.btn-icon-split .icon {
    background: rgba(0,0,0,.15);
    display: inline-block;
    padding: .375rem .75rem;
}

.btn-icon-split .text {
    display: inline-block;
    padding: .375rem .75rem;
}

Пытался заставить его работать, используя float, bootstrap вытягивание вправо, ...

Я использую следующую тему bs: https://startbootstrap.com/themes/sb-admin-2/

Answer 1

Вы можете решить вашу проблему, убрав значок из обычного потока документов с помощью absolute позиции:

.btn {
  width: 300px;
}

.btn-icon-split {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.btn-icon-split .icon {
    background: rgba(0,0,0,.15);
    display: inline-block;
    padding: .375rem .75rem;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.btn-icon-split .text {
    display: inline-block;
    padding: .375rem .75rem;
}

<button type="submit" class="btn btn-primary btn-block btn-icon-split">
        <span class="icon">
            <i class="fas fa-search"></i>
        </span>
        <span class="text">Search</span>
</button>

Другой вариант, который приходит на ум, - это добавление диапазона «помощник» после текста той же ширины, что и у значка перед текстом, и использование space-between.