How to center image in carousel

问题

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 ?

回答1:

You've got two options

If you want the image to take up entire carousel then

img { width: 100%; height: auto; }
If you dont want the image to stretch 100 %, then set your desired width(or dont, just specify margin) and margin auto:

img { width: 50%; margin: auto; }

回答2:

If you really want to follow the twitter bootstrap synthax, you should use the center-block class as explained in the documentation.

Link to the documentation

Link to the bootply

Extract of code :

<img class="center-block" src="something.xxx" alt="xxx">

回答3:

Try adding this CSS to align the image to the center:

.carousel-inner .item a img {

margin: auto;

}

回答4:

For me this help.

.carousel-item img{
 width: auto;
 height: 245px;
 max-height: 245px;
 margin: auto; 
 display: block;
 }

来源：https://stackoverflow.com/questions/30538967/how-to-center-image-in-carousel

标签

jquery

css

twitter-bootstrap

twitter-bootstrap-3

carousel