0

Quisiera saber: ¿Cómo centrar los items dentro de un <div>?, en particular si el item es un fa-icon. ¿Cuál es el error?. He probado: Alinear texto del objeto, alinear items, margin:0 auto, definir un estilo. Nada me ha resultado. Agradezco su colaboración y comparto el fragmento del código donde se visualiza el error.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
  <div class="col-lg-3">
    <div class="section-overview">
      <h3 style="color:#062156">Enlaces Relacionados:</h3>
    </div>
  </div>
  <div class="col-lg-9">
    <ul class="thumbnails">
      <div class="col-lg-4 col-md-4">
        <div class="relacionados-item">
          <h4><a target="_blank" href="http://*">Texto.</a></h4>
          <h5>Texto 2.</h5>
          <a href="/videos.html" target="_blank">
            <i class="fa fa-cogs fa-4x"></i>
          </a>
        </div>
      </div>
  </div>

¿Quisiera saber cómo alinear el icono fa-cogs para que se visualice centrado en relación a su texto superior?

2 respuestas 2

1

¿El error?: Incluir dentro de la misma división al texto y al fa-icon. Solución: Sacar el contenido que no me interesa centrar del <div>, y usar css sólo para ubicar el icono en la posición center deseada. ¿Cómo sería el nuevo código? HTML:

   <h4><a target="blanck" href="http://*">Texto.</a></h4>
   <h5>Texto 2.</h5>    
   <div id="info">
       <a href="/"><i class="fa fa-cogs fa-4x"></i></a>
   </div>

CSS:

#info {
    width: 50%;
    margin: 0 auto; 
}
2
  • Cambia target=blanck por target=blank para no llevar a otros a errores. Échale un ojo al css en este otro ejemplo por si complementa algo tu respuesta: bootply.com/132008 Commented el 9 jun. 2016 a las 7:50
  • 1
    De hecho es target="_blank"
    – Shaz
    Commented el 9 jun. 2016 a las 13:20
0

Tu problema es que no estás aplicando bien el sistema de rejilla de Boostrap. Tienes un col-lg-3 seguido de un col-lg-9 que suman una fila seguido por un col-* dentro pero que no tiene su correspondiente row.

Para centrarlo sólo tienes que usar la clase text-center de Bootstrap.

.thumbnails {
  list-style: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row">
  <div class="col-lg-3">
    <div class="section-overview">
      <h3 style="color:#062156">Enlaces Relacionados:</h3>
    </div>
  </div>
  <div class="col-lg-9">
    <ul class="thumbnails">
      <li>
        <div class="row">
          <div class="col-lg-4 col-md-4">
            <div class="relacionados-item text-center">
              <h4><a target="blanck" href="http://*">Texto.</a></h4>
              <h5>Texto 2.</h5>
              <a href="/videos.html" target="_blank">
                <i class="fa fa-cogs fa-4x"></i>
              </a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

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.