Question

布局似乎很简单但是故障排除似乎超出了我的css和bootrstap技能 -

我正在尝试使用渐变背景的全宽div - #topwrapper，然后将另一个固定维度的div（span12 = 1170px）居中 - #headerimage。目标是在调整浏览器大小时缩放#headerimage div。

问题是，由于某些未知原因，＃headerimage被推到左边而不是居中。

以下是代码：

<div class="container" id="topwrapper">
   <div class="row-fluid">
      <div class="span12" id="headerimage">PLEASE CENTER</div>
   </div>
</div>

#topwrapper {
    width:100%;
    height:270px;
    background:url(../img/tophead-wrapper-bg.png) repeat transparent;   
}

#headerimage {
    background:url(../img/thbg01.jpg) no-repeat transparent;   
    height:270px;
    margin:0 auto;
}

以下是相关网页的链接： http://kh.kagyu.org。无视红栏下方的任何内容

任何人都知道解决这个问题的方法吗？

Answer 1

如果您需要流畅的布局，则需要使用班级container-fluid而不只是container。（确保在项目中包含bootstrap-responsive.css文件）

<div class="container-fluid" id="topwrapper">
   <div class="row-fluid">
      <div class="span12" id="headerimage">PLEASE CENTER</div>
   </div>
</div>

如果您想要固定布局，请从-fluid和container移除row。

<div class="container" id="topwrapper">
   <div class="row">
      <div class="span12" id="headerimage">PLEASE CENTER</div>
   </div>
</div>

添加text-align:center以使文字居中。您可以删除margin: 0 auto;，如果您使用的是span12类，则div将由引导网格系统居中。

#headerimage {
    background:url(../img/thbg01.jpg) no-repeat transparent;   
    height:270px;
    text-align:center;
}

Answer 2

容器类以其中的任何内容添加边距和宽度，正确的方法是使用以下布局，文本中心类添加text-align：center因此使图像居中，希望它有所帮助！ / p>

<div id="topwrapper">
   <div class="container">
      <div class="row-fluid">
         <div class="span12 text-center" id="headerimage">PLEASE CENTER</div>
      </div>
   </div>
</div>

Twitter Bootstrap Div在全宽容器中居中问题

2 个答案: