Как выровнять background-image расположенный в span?

Question

[Semmy_99]

Здравствуйте. Подскажите пожалуйста как выровнять значки по центру без использования flex box'ов?

<div class="container-fluid">
        <div class="container">
          <div class="row features">
            <div class="col-md-4">
            <span class="prof"></span>
              <h4>professional</h4>
              <p>Lorem ipsum dolor sit amet,<br />consectetur elit.</p>
            </div>
          
           <div class="col-md-4">
            <span class="heart"></span>
              <h4>amateurs</h4>
              <p>Lorem ipsum dolor sit amet,<br />consectetur elit.</p>
            </div>

            <div class="col-md-4">
            <span class="headset"></span>
              <h4>for everyone</h4>
              <p>Lorem ipsum dolor sit amet,<br />consectetur elit.</p>
            </div>
          </div>
        </div>
      </div>

Пробовал с помощью text align , текст перемещается в центр,а background-image - нет

Answer 1

[Ankhena]

text-align?

У background тоже есть свойство выравнивания. background-position называется.

Знаете, вот Вы не приложили же CSS, не выложили нормально код на https://jsfiddle.net/
Почему Вы считаете, что мы тут гадать будем.

Comments

[Semmy_99]

Не помогает

[Ankhena]

Jack Azizov: я же не знаю какие стили для span у вас нарисованы

[Semmy_99]

Ankhena W: прошу прощения,просто подключен бутстрап и я подумал вдруг там какие стили переопределены. Вот код https://jsfiddle.net/3s6Lj7p6/

[Ankhena]

Jack Azizov: https://jsfiddle.net/fon9dmq9/

При таком раскладе, если span блочный и "маленький", то по середине он выравнивается обычным margin: auto

[Alexander Belov]

Если так добавлены изображения, то не нужно писать ещё стили. Удалить width и прописать позиционирование center для background

[Ankhena]

Alexander Belov: либо так
либо еще пяток других способов

Answer 2

[Alexander Belov]

Удалить width и прописать позиционирование center для background
Пример

Comments

[Mesuti]

Спасибо!