html - How to put Carousel in center -


screenshot of carousel

hi guys, im working html , right added carousel item html project, question how can display carousel in middle of page since appears @ 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> 

i'm aware guess, plausible solutions include:

  • if it's position:relative; element: set element contains carousel display:block; , give margin:0 auto;. make top , bottom margins 0 , left , right margins automatic, can think of lateral margins fighting each other element ends in middle.

  • if it's position:absolute; element: give following css:


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

i update answer when provide more code if needed.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -