1

Hola tengo 3 div alineados con bootstrap y quiero dentro de cada div centrar el icono.

<div class="col-sm-6 col-md-4">
     <i class="fa fa-desktop fa-5x fa-align-center"></i>
     <h3 class="text-center">Diseño web</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
   </div>

Estoy usando la clase fa-align-center y nada. con la clase de bootstrap text-center tampoco me funciona.

2 respuestas 2

5

Deberías añadirle la clase al contenedor, no al icono. Es decir, deberías de añadirle la clase text-center al div que contiene el icono y no al propio icono.

He creado un div que englobe al icono (y que contenga la clase anterior) para que el resto de textos no se centren, tal y como me has planteado en los comentarios, y solo se centre el icono.

Tu ejemplo corregido:

<div class="col-sm-6 col-md-4">
   <div class="text-center"><i class="fa fa-desktop fa-5x"></i></div>
   <h3 class="text-center">Diseño web</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
3
  • si funciona pero me centra todo el contenido de los divs y los parrafos no los quiero centrar. Commented el 7 jun. 2017 a las 13:41
  • ya lo he solucionado. gracias francisco Commented el 7 jun. 2017 a las 13:43
  • @RafaelHernández Lo que puedes hacer es englobar el icono en otro div y asignarle la clase text-center a este último de manera que solo afecte al icono. Commented el 7 jun. 2017 a las 13:46
0

La clase text-center debes ponerla dentro de <i> quitala del div que la engloba

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.