11

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

6 Answers 6

16

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>
0
13

You've got two options

  1. If you want the image to take up entire carousel then
img 
{
   width: 100%;
   height: auto;
}
  1. 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;
}
1
  • 1
    Thank you, This is perfect solution works with BS5 too Jul 4, 2021 at 18:07
7

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">
0
5

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

.carousel-inner .item a img {

margin: auto;

}
5

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>
1

For me this help.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.