web-dev-qa-db-ja.com

div内の2つの要素を垂直方向に中央揃え

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

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>
htmlcsscentering
13
Romuloux

以下を追加します：display：table; bannerRightへ

表示：テーブルセル;および垂直方向の配置：中央;バナーに

私はこれを試していません、それがうまくいかない場合はフィードバックを送ってください。 ;）

編集：言及するのを忘れた：「float」と「position」プロパティをオフにする

0
Fábio

要素を垂直方向、水平方向、または両方にセンタリングする方法

Div内でdivを中央に配置する方法は2つあります。

1つの方法はCSSFlexboxを使用し、もう1つの方法はCSStableとpositioningプロパティ。

どちらの場合も、中央に配置されたdivの高さは、可変、未定義、不明など、さまざまです。中央のdivの高さは関係ありません。

enter image description here

両方の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 Method

#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;
}

[〜＃〜]デモ[〜＃〜]

使用する方法...

使用する方法がわからない場合は、flexboxを以下の理由でお勧めします。

  1. 最小限のコード。非常に効率的
  2. 上記のように、センタリングはシンプルで簡単です（ 別の例を参照 ）
  3. 高さが等しい列はシンプルで簡単
  4. フレックス要素を整列するための複数のオプション
  5. それは反応します
  6. フロートやテーブルはレイアウトを構築するためのものではなかったため、限られたレイアウト容量しか提供しませんが、flexboxは、幅広いオプションを備えた最新（CSS3）のテクニックです。

ブラウザのサポート

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

26
Michael_B