0

レイアウトは非常にシンプルに見えますが、トラブルシューティングは私の css と bootrstap のスキルを超えているようです -

グラデーションの背景を持つ全幅の div (#topwrapper) を作成しようとしています。これにより、固定サイズ (span12 = 1170px) の別の div (#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 . 赤いバーより下のものは無視してください

誰でもこの問題の解決策を知っていますか?

4

2 に答える 2

1

流動的なレイアウトが必要な場合は、 .(プロジェクトにファイルが含まれていることを確認してください)container-fluidの代わりにクラスを使用する必要があります。containerbootstrap-responsive.css

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

固定レイアウトが必要な場合は、と の-fluid両方からを削除します。containerrow

<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;
}
于 2013-09-26T03:12:01.600 に答える
0

これを行う正しい方法は次のレイアウトです。text-center クラスは text-align:center を追加するため、画像を中央に配置します。

<div id="topwrapper">
   <div class="container">
      <div class="row-fluid">
         <div class="span12 text-center" id="headerimage">PLEASE CENTER</div>
      </div>
   </div>
</div>
于 2013-09-26T03:59:21.613 に答える