How to center image in carousel ? I tried bootstrap 3 carousel using code from 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>
For wide screen, carousel image is left aligned and there is ugly empty space in right of image. How to make carousel nicer ? Is it possible to center images or other solution ?