我想用一个非常基本的例子。使用入门页面和网格系统，我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
.．.会产生居中的文本。
然而，它仍然出现在最左边。我做错了什么?
当前回答
你需要调整。span。
例子:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
其他回答
你需要调整。span。
例子:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
如果你使用Bootstrap 2.0+
这可以使div居中于页面。
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
添加答案。希望它能帮助到别人
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class='d-flex flex-row justify-content-center'>
<img
className='img-fluid'
src="<url>"
/>
</div>
</div>
</div>
我尝试了两种方法，它的工作很好，以中心的div。这两种方法都将对齐div在所有屏幕上。
方法1:使用Push:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>
方法2:使用偏移量:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>
结果:
解释
Bootstrap将指定左边，指定屏幕占用的第一列。如果我们使用offset或push，它会将“this”列移动“that”列。虽然我遇到了一些问题，在响应补偿，推动是了不起的。
如果你使用Bootstrap 3，它也有内置的CSS类命名为.text-center。这就是你想要的。
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
请参阅jsfiddle中的示例。http://jsfiddle.net/ucheng/Q4Fue/
