Clever Geek Handbook

How to center an image in a carousel

How to center an image in a carousel? I tried bootstrap 3 carousel using the code from the 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 a widescreen image, the carousel is left aligned and there is an ugly white space on the right side of the image. How to make the carousel better? Can images be centered or another solution?

+5


source to share


4 answers


You have two options



  • If you want the image to take up the whole carousel then

    IMG {width: 100%; height: auto; }

  • If you don't want the image to stretch 100%, set the desired width (or leave out just the margin) and margin auto:

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

+7


source


If you really want to follow twitter bootstrap syntax, you must use the class as described in the documentation. center-block

Link to documentation

Download link



Extracting the code :

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


source


Try adding this CSS to center align your image:

.carousel-inner .item a img {

margin: auto;

}
+1


source


This is help for me.

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


source






More articles:


All Articles