How to center image in carousel

Question

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 ?

Answer 1

If you want the image to be centred vertically as well as horizontally (i.e. the height of the image is not the height of the carousel), the easiest way is to use flexbox alongside making sure the width and height match the parent.

<div class="carousel-item">
  <div class="d-flex justify-content-center w-100 h-100">
    <img src="images/2d_trad_1.png" class="align-middle" alt="...">
  </div>
</div>

Answer 2

I know I am super late but in case that someone is searching for an answer today I just found out that for me the best solution was to put the image in a separate div in the .carousel-item and then center it using flex:

<div class="carousel-item">
    <div class="d-flex justify-content-center">
        <img src="img.png" alt="img.png">
    </div>
</div>