如何让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>


转自： http://www.aganzai.com/?post=22