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 el 9 jun. 2016 a las 7:50
  • 1
    De hecho es target="_blank"
    – Shaz
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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