CODEWITHSUNDEEP
htmlcarousel
José Carlos Loarca Hass
José Carlos Loarca Hass

Reputation: 41

How to put Carousel in center

Screenshot of Carousel

Hi guys, im working with HTML and right now i just added a carousel item to my html project, my question is how can you display the carousel in the middle of the page since it appears at the left side.

EDIT: heres carrousel code

<div class="box-body">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
              <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>

            </ol>
            <div class="carousel-inner">
              <div class="item">
                <img src="http://cdn3.pcadvisor.co.uk/cmsdata/features/3420161/Android_800_thumb800.jpg" alt="First slide">
                <div class="carousel-caption">
                  <h4>ANDROID</h4>
                </div>
              </div>
              <div class="item">
                <img src="http://www.channelbiz.es/wp-content/uploads/2014/03/ios-7-1-hs-increasecontrast.jpg" alt="Second slide">
                <div class="carousel-caption">
                  <h4>IOS</h4>
                </div>
              </div>
              <div class="item active">
                <img src="http://www.baquia.com/wp-content/uploads/2015/11/pc-con-windows-7.jpg" alt="Third slide">
                <div class="carousel-caption">
                  <h4>WINDOWS</h4>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
              <span class="fa fa-angle-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
              <span class="fa fa-angle-right"></span>
            </a>
          </div>
        </div>

Upvotes: 0

Views: 1366

Answers (4)

Maihan Nijat
Maihan Nijat

Reputation: 9354

Try the following:

.box-body {
   margin: 0 auto;
}

Upvotes: 0

ThomasMcDonald
ThomasMcDonald

Reputation: 323

Im assuming that its a div tag, so heres a jsfiddle that center aligns a div tag

<div class="center-div"></div>

body
{
  background-color: #fcfcfc;
}
.center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

https://jsfiddle.net/McDTommy/ctev6aLv/

Upvotes: 0

fnune
fnune

Reputation: 5494

I'm aware that this is just a guess, but plausible solutions include:

  • If it's a position:relative; element: set the element that contains your carousel to display:block; and give it margin:0 auto;. This will make its top and bottom margins 0 and its left and right margins automatic, so you can think of it as the lateral margins fighting each other so your element ends up in the middle.

  • If it's a position:absolute; element: give it the following CSS:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

I will update the answer when you provide more code if needed.

Upvotes: 2

BlackFedora778
BlackFedora778

Reputation: 49

You should be able to simply add a margin-left: X%;(Change X to how ever much ou want) to your css and put it in the middle of the page.

Upvotes: 1

Related Questions