16

<p>2 つの要素を垂直方向に中央揃えにしようとしています。

私はphrogz.netのチュートリアルに従いましたが、それでも要素は div の上、div の下、div 内で上揃えに配置されます。

私は何か他のことを試してみますが、ここでの質問のほとんどはそのチュートリアルに戻るだけです.

このスニペットは、Web ページの上部にあるバナー用です。

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}
<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p>
      <p>vertically centered</p>
    </div>
  </div>
  <div class="clear">
  </div>
</div>

4

2 に答える 2

37

要素を垂直方向、水平方向、またはその両方の中央に配置する方法

div 内で div を中央に配置する 2 つの方法を次に示します。

1 つは CSS Flexboxを使用し、もう 1 つは CSSテーブルと配置プロパティを使用します。

どちらの場合も、中央の div の高さは可変、未定義、不明など、さまざまです。中央の div の高さは問題ではありません。

ここに画像の説明を入力

両方の HTML は次のとおりです。

<div id="container">   

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS Flexbox メソッド

#container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 300px;
    border: 1px solid black;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

デモ

2 つの子要素 ​​( .box) は、 で垂直方向に整列されflex-direction: columnます。水平方向の配置の場合は、 を に切り替えますflex-direction(または、デフォルト設定rowのルールを単に削除します)。flex-direction: rowアイテムは垂直方向および水平方向の中央に配置されたままになります ( DEMO )。

CSS テーブルと配置方法

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

.box {
    width: 300px;
    padding: 5px;
    margin: 7px auto;   
    text-align: center;
}

デモ

どの方法を使うか...

どの方法を使用すればよいかわからない場合は、次の理由からフレックスボックスをお勧めします。

  1. 最小限のコード; 非常に効率的
  2. 上記のように、センタリングはシンプルで簡単です (別の例を参照してください) 。
  3. 同じ高さの列はシンプルで簡単です
  4. フレックス要素を整列するための複数のオプション
  5. レスポンシブです
  6. レイアウトの構築を意図したものではないため、レイアウト容量が限られているフロートやテーブルとは異なり、フレックスボックスは幅広いオプションを備えた最新の (CSS3) 手法です。

ブラウザのサポート

Flexbox は、 IE < 10 を除くすべての主要なブラウザーでサポートされています。Safari 8 や IE10 などの一部の最近のブラウザー バージョンでは、ベンダー プレフィックスが必要です。プレフィックスを追加する簡単な方法については、Autoprefixerを使用します。この回答の詳細。

于 2015-08-13T00:12:14.363 に答える
0

次を追加します。バナー右へ

表示:テーブルセル; および垂直方向の位置合わせ:中央; バナー右内へ

私はこれを試していません。うまくいかない場合はフィードバックをお願いします。;)

編集: 言及するのを忘れました: 'float' および 'position' プロパティをオフにします

于 2012-08-15T23:05:58.360 に答える