Cómo el centro de la imagen en carrusel ?
Traté de bootstrap 3 carrusel utilizando el código de bootstrap tutorial:

                <a href="/Webconte/Details/124">
<img src="/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/123">
<img src="/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/105">
<img src="/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/95">
<img src="/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/107">
<img src="/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/100">
<img src="/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/98">
<img src="/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/78">
<img src="/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/11">
<img src="/Webconte/Image/11" />
</a>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>

Para la gran pantalla, el carrusel de la imagen está alineada a la izquierda y no es feo el espacio vacío a la derecha de la imagen.
Cómo hacer carrusel mejor ? Es posible centro de las imágenes o de otra solución ?

InformationsquelleAutor Andrus | 2015-05-29

3 Comentarios

  1. 7

    Tienes dos opciones

    1. Si quieres la imagen a tomar todo el carrusel, a continuación,

      img
      {
      width: 100%;
      altura: auto;
      }

    2. Si usted no quiere que la imagen tramo de 100 %, a continuación, establecer su anchura deseada(o no, sólo tiene que especificar el margen) y el margen de auto:

      img
      {
      width: 50%;
      margin: auto;
      }

Dejar respuesta

Please enter your comment!
Please enter your name here