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

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

Это мой 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, и поэтому не очень удобно.


html css twitter-bootstrap font-awesome glyphicons
person LoveAndHappiness    schedule 22.04.2014    source источник

Ответы (2)


arrow_upward
32
arrow_downward

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

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

Вот демо

РЕДАКТИРОВАТЬ №1: Поскольку этот ответ, похоже, набирает обороты, стоит отметить, что способ сделать это более «щебетать-загрузочный» будет таким, как @SimoneMelloni предложил в своем ответе на этот вопрос, т.е. использование класса text-center.

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

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

РЕДАКТИРОВАНИЕ №2: я только что видел ваше [OP] редактирование элемента center: хотя это действительно не CSS, а HTML, это не такая уж большая проблема, а большая проблема заключается в том, что он устарел. Дополнительную информацию об этом см. в документе MDN по элементу <center>

person benomatis    schedule 22.04.2014
comment
Да. Прошу прощения, что вам пришлось напомнить мне об этом. Я собирался принять это, но Stackoverflow не позволил мне так быстро проверить ваш ответ как правильный... Теперь это работает. Спасибо еще раз. - person LoveAndHappiness; 23.04.2014

arrow_upward
13
arrow_downward 

<div class="text-center">
    <i class="fa fa-camera-retro fa-5x></i>
</div>

Сделал трюк, не открывая файл css

person Simone Melloni    schedule 29.05.2015
comment
Не работает, потому что внешний пролет не имеет ширины! - person electronix384128; 24.09.2015
comment
UPS. Нам нужно использовать <div> вместо <span>. Рабочая демонстрация здесь - person Simone Melloni; 24.09.2015