4

CSS と Zurb Foundation 5 フレームワークを使用して、ヘッダー パネル (全幅約 250 ピクセルの高さのコンテナー) の中央にテキスト行を配置しようとしていますが、何らかの理由で機能しません。

このリンクhttp://www.vanseodesign.com/css/vertical-centering/に要約されている6つの垂直方向の配置方法をそれぞれ試しました（行の高さ方法、cssテーブル方法、絶対位置と負のマージン、絶対位置とストレッチ、上下のパディング、フローティング div)。私が管理した最良の方法は、テキストをヘッダー パネルの外側とページ全体の中央に配置するか、ヘッダー パネルの高さをゆがめながらテキストを短い距離 (一見ランダムに) 上下に移動することです。

ヘッダー パネルの CSS に競合するものがある (またはストック ファウンデーション フレームワークに競合する) ものがあると思われますが、解決できません。ポインタに感謝します。

ありがとう！

標準の ZURB タイトル バー (高さ 45 ピクセル - パディングを参照) の直後にあるヘッダー パネルの CSS は次のとおりです。

#headerpanel {
  background: linear-gradient(rgba(0, 0, 0, 0.3) , rgba(0,0,0,0.3)), url( ../../images/footerbg1.jpg);  
  background-size: cover;
  padding: 45px 0 250px;
  text-align: center;
  position: relative;
}

そして私のHTMLレイアウトは次のとおりです。

<section id="headerpanel">       

 <div class="row">
  <div class="large-12 columns">

    <div class="spanMiddle">
   <?php print @$this->heading; ?>
    </div>

  </div>
 </div>
</section>

次に、さまざまな方法で spanMiddle div のパラメーターを設定しようとしました。

#spanMiddle {
  position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

また、以下の部分なしで、専用の p または span タグ (headerpanel css の直後に .p {} または .spam {} で設定) を使用して試しました。

 <div class="row">
  <div class="large-12 columns">
  </div>
 </div>

私も試しました：

.spanMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}

と

    margin-top:auto;
    margin-bottom:auto;

どこが間違っていますか？

4

2 に答える 2

3

このCSSを試してください：

#headerpanel {
    background: linear-gradient(rgba(0, 0, 0, 0.3) , rgba(0,0,0,0.3)), url( ../../images/footerbg1.jpg);  
    background-size: cover;
    text-align: center;
    position: relative;
    display: table;
    width: 100%;
    height : 250px; /* Determine the height of the box */
}

#headerpanel .row,
#headerpanel .columns{
    display: table;
    width: 100%;
    height: 100%;                       
}
#headerpanel .spanMiddle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;                     
}

ここにフィドルがあります

それが役に立てば幸い ：）

于 2014-11-11T10:29:45.653 に答える