html - How to put Carousel in center -
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 carouseldisplay:block;
, givemargin: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
Post a Comment