Как централизовать глификон по горизонтали с помощью Twitter Bootstrap

Я пытаюсь сосредоточить свои иконки FontAwesome внутри моего кода Bootstrap Twitter.

Это мой HTML:

<div id="frontpage-content" class="content">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <span>
                    <i class="fa fa-camera-retro fa-5x"></i>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus
                        in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!</p>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-camera-retro fa-5x"></i>
                <p>Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et alias possimus error ex tenetur quasi sint eius dicta officia earum eveniet suscipit corporis autem deleniti nihil sed!
                        Earum blanditiis vel similique nisi fugit reprehenderit?</p>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-camera-retro fa-5x"></i>
                <p>Quisquam eos aperiam autem atque minus modi similique earum! Ab, laboriosam odit non quo officiis asperiores atque dolorum omnis vitae in qui officia sequi molestias quisquam velit exercitationem aperiam. Voluptatum, unde, nesciunt
                        temporibus voluptates sint ab architecto at quod dolore.</p>
            </div>
        </div>
    </div>

И вот что я уже пробовал:

#frontpage-content {
    background-color: $bgDefault;
    i {
        text-align:center;
    }
    span {
        text-align:center;
    }
}

Отлично работает для текста, но не работает для элементов i.

Я знаю, что могу сосредоточить его, если я дам окружению div статическую ширину, а затем поместите элемент i с...

 margin-right: auto;
 margin-left: auto;
 display: block;

... но я не хочу придавать окружению div статическую ширину.

Итак, как решить эту проблему, не применяя статическую ширину?

Изменить: Также я знаю элемент HTML center, но это не будет CSS и, следовательно, не очень удобно.

Ответ 1

Все, что вам нужно, это определить display:block с text-align:center в i внутри вашего контейнера div, и вы получите его:

.col-lg-4 i {
    display:block;
    text-align:center
}

Вот демонстрация

РЕДАКТИРОВАТЬ № 1:. Как кажется, этот ответ получил некоторую тягу, стоит отметить, что чем больше "twitter-bootstrapy", тем выше будет @Симон Меллони предложил в их ответе на этот вопрос, т.е. использование класса text-center.

Обратите внимание, что это в основном то же самое, что и мое решение, учитывая, что для всех text-center установлено значение text-align:center, он просто использует функцию бутстрапа twitter.

Также обратите внимание, что text-align:center работает только с элементами уровня блока или теми, где вы явно устанавливаете display:block, как в моем исходном ответе выше. Там мне нужно было указать это, потому что я использовал его на i, который является встроенным элементом.

РЕДАКТИРОВАТЬ № 2: Я только что видел ваше редактирование в элементе center: хотя это действительно не CSS, а HTML, что меньше проблемы, тем больше проблема с ним - это то, что он устарел, Подробнее об этом см. MDN doc в элементе <center>

Ответ 1

Ответ 2