html - ¿Cómo centro Glyphicons horizontalmente usando Twitter Bootstrap?

bootstrap 2

Question

Estoy tratando de centrar mis íconos de FontAwesome dentro de mi código de Bootstrap de Twitter.

Este es mi 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>

Y aquí está lo que ya he probado:

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

Funciona perfectamente para el texto, pero no funciona para los elementos i .

Sé que puedo centrarlo, si le doy a la división circundante un ancho estático y luego posiciono el elemento i con ...

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

... pero no quiero darle al div que lo rodea un ancho estático.

Entonces, ¿cómo resuelvo este problema, sin aplicar ancho estático?

Edición: También sé del elemento HTML del center , pero esto no sería CSS, y por lo tanto no es muy útil.

Answer 1

Todo lo que necesita es definir display:block with text-align:center en el i dentro de su div contenedor y lo tendrá:

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

Aquí hay una demo.

EDICIÓN # 1: Como esta respuesta parece tener un poco de fuerza, vale la pena señalar que la forma más "twitter-bootstrapy" de hacer esto sería lo que @SimoneMelloni sugirió en su respuesta a esta pregunta , es decir. El uso de la clase de text-center .

Tenga en cuenta que esto es básicamente lo mismo que mi solución, considerando que todo lo que hace el text-center es establecer text-align:center , solo está haciendo uso de una característica de arranque de Twitter.

También tenga en cuenta que text-align:center solo funciona en elementos a nivel de bloque o en los que establece explícitamente display:block , como en mi respuesta original anterior. Allí necesitaba especificar eso porque lo usé en i , que es un elemento en línea .

EDICIÓN # 2: Acabo de ver su edición en el elemento center : si bien no es CSS sino HTML, es un problema menor, el problema más grande es que está en desuso. Vea más información al respecto en el documento de MDN en el elemento <center>

Answer 2

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

Hizo el truco sin abrir el archivo css.