如何将轮播图像中心与引导程序对齐？答案

【问题标题】：How do I align carousel image center with bootstrap?如何将轮播图像中心与引导程序对齐？
【发布时间】：2015-11-24 03:55:24
【问题描述】：

我尝试使用bootstrapcarousel，但无法正确对齐图像。

我的图片尺寸是1250*550

问题来了

我想让这张图片正确地位于轮播的中心。我已经尝试添加

img-responsive 和 center-block 进入 img 类，但似乎不起作用。

这里是carousel code

<div class="carousel slide" id="carousel-641804">
    <ol class="carousel-indicators">
        <li data-slide-to="0" data-target="#carousel-641804">
        </li>
        <li data-slide-to="1" data-target="#carousel-641804">
        </li>
        <li data-slide-to="2" data-target="#carousel-641804" class="active">
        </li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <img class ="img-responsive center-block" alt="Carousel Bootstrap First" src="source/top1.jpg" />
            <div class="carousel-caption">
                <h4>
                    First Thumbnail label
                </h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
        <div class="item">
            <img alt="Carousel Bootstrap Second" src="source/top2.jpg" />
            <div class="carousel-caption">
                <h4>
                    Second Thumbnail label
                </h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
        <div class="item active">
            <img alt="Carousel Bootstrap Third" src="source/top3.jpg" />
            <div class="carousel-caption">
                <h4>
                    Third Thumbnail label
                </h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
    </div> <a class="left carousel-control" href="#carousel-641804" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-641804" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

【问题讨论】：

标签： jquery html css twitter-bootstrap layout

【解决方案1】：

使用这个最佳答案 Make Bootstrap's Carousel both center AND responsive?

它可以完美地解决这个问题。

在 Css 中添加这个

div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

【讨论】：