Html 引导3转盘上的定心按钮
我正在尝试将一个按钮置于引导3旋转木马的中心,这个按钮悬停在旋转木马的上方 我尝试将按钮包装在一个div类中,并使用文本align:center;或保证金:0自动;没有成功 我可以手动设置.hover类左边的边距;这会起作用,但它没有完全居中。如何使我的按钮居中 这是我的代码: HTML:Html 引导3转盘上的定心按钮,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我正在尝试将一个按钮置于引导3旋转木马的中心,这个按钮悬停在旋转木马的上方 我尝试将按钮包装在一个div类中,并使用文本align:center;或保证金:0自动;没有成功 我可以手动设置.hover类左边的边距;这会起作用,但它没有完全居中。如何使我的按钮居中 这是我的代码: HTML: <!--The slider--> <section> <div class="hover-slide"> <a href="#pag
<!--The slider-->
<section>
<div class="hover-slide">
<a href="#page-intro" class="btn btn-default start-me">Let's go</a>
</div>
<div id="slider-top" class="carousel slide" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>
<!--Wrapper for the the slide-->
<div class="carousel-inner">
<!--specify first slide-->
<div class="item active">
<img src="img/01.jpg" alt="Foto1">
<div class="carousel-caption">
<h3>TEST</h3>
</div>
</div>
<!--specify second slide-->
<div class="item">
<img src="img/02.jpg" alt="Foto2">
<div class="carousel-caption">
<!--<a href="#page-intro" class="btn btn-default start-me">Let's go</a>-->
<h3>TEST SLIDE 2</h3>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
您需要在列中换行并添加
文本中心
类:
小提琴:
<section>
<div class="col-md-12 hover-slide text-center"> // <------ HERE
<a href="#page-intro" class="btn btn-default start-me">Let's go</a>
</div>
<div id="slider-top" class="carousel slide col-md-12" data-ride="carousel"> // <------ HERE
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>
摘录:
<section>
<div class="col-md-12 hover-slide text-center"> // <------ HERE
<a href="#page-intro" class="btn btn-default start-me">Let's go</a>
</div>
<div id="slider-top" class="carousel slide col-md-12" data-ride="carousel"> // <------ HERE
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>
//
太棒了。我真的以为我试过这种方法,一定是搞砸了:)谢谢你,我今天真的学到了很多!