如何让Bootstap的轮播图片居中
Bootstrap比较好的前段开发框架，其中有个轮播代码比较喜欢，但是宽度小于1140px后，会出现不居中问题，比较丑。
我的理解是，直接让图片占用div的100%，所以就是在img的标签内加上style="width: 100%;"的样式，让图片永远都是100%显示。
相应的CSS样式
.carousel-inner img {
width:100%;
}
我的轮播代码修改后的版本
<div class="container theme-showcase" role="main">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/960x150?auto=yes&text=居中成功&bg=83af9b&fg=f9cdad" alt="1" style="width: 100%;">
</div>
<div class="item">
<img data-src="holder.js/960x150?auto=yes&text=^_^&bg=83af9b&fg=f9cdad" alt="2" style="width: 100%;">
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</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>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
使用到的库
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/holder/2.8.2/holder.min.js"></script>
