How do I align carousel image center with bootstrap?

Question

I was trying to use bootstrap carousel, but I can't align image properly.

My picture size is 1250*550

Here is the problem

I want to make this image located in the center of carousel properly. I've tried to add

img-responsive and center-block into img class, but it seems not work.

Here is 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>

Answer 1

Use this best answer Make Bootstrap's Carousel both center AND responsive?

It can figure this question out perfectly.

Add this in 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;
}