html - div 内の要素を垂直方向に揃えるにはどうすればよいですか?

Question

私はdiv2つの画像とh1. それらはすべて、div 内で互いに隣り合って垂直方向に配置する必要があります。

absolute画像の 1 つは内に配置する必要がありますdiv。

これがすべての一般的なブラウザで動作するために必要な CSS は何ですか?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

score 1047 · Accepted Answer

うわー、この問題は人気があります。それはプロパティの誤解に基づいていvertical-alignます。この優れた記事はそれを説明しています：

理解vertical-align、または「コンテンツを垂直方向に中央揃えする (しない) 方法」 ( Gavin Kistner 著)。

「CSS でセンタリングする方法」</a>は、さまざまな状況で必要な CSS センタリング属性を見つけるのに役立つ優れた Web ツールです。

一言で言えば_{^{（そしてリンクの腐敗を防ぐために）}}：

インライン要素(およびインライン要素のみ) は、を介してコンテキスト内で垂直方向に整列できますvertical-align: middle。ただし、「コンテキスト」は親コンテナーの高さ全体ではなく、それらが含まれるテキスト行の高さです。
ブロック要素の場合、垂直方向の配置はより難しく、特定の状況に大きく依存します。
- 内部要素の高さを固定できる場合は、その位置を作成して、その位置absoluteを指定できます。jsfiddle の例heightmargin-toptop
- 中央に配置された要素が単一の線 で構成され、 その親の高さが固定されline-heightている場合、コンテナーの高さを埋めるように設定するだけです。この方法は、私の経験では非常に用途が広いです。jsfiddle の例
- …そのような特殊なケースはもっとあります。

score 297 · Accepted Answer

Flexbox のサポートが増えているため、この CSS を含む要素に適用すると、含まれるアイテムが垂直方向に中央揃えになります。

.container {
    display: flex;
    align-items: center;
}

Internet Explorer 10およびそれ以前 (< 4.4 (KitKat)) の Android ブラウザーもターゲットにする必要がある場合は、プレフィックス付きのバージョンを使用します。

.container {
    display: -ms-flexbox;
      display: -webkit-flex;
    display: flex;

       -ms-flex-align: center;
    -webkit-align-items: center;
       -webkit-box-align: center;

       align-items: center;
}

score 128 · Accepted Answer

私はこの非常に単純なコードを使用しました：

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

明らかに、 a を使用してもを使用して.classも#id、結果は変わりません。

score 56 · Accepted Answer

それは私のために働いた：

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

score 35 · Accepted Answer

要素を縦横に整列

これらのいずれかを使用します。結果は同じになります。

ブートストラップ 4
CSS3

1. ブートストラップ 4.3+

垂直配置の場合:d-flex align-items-center

水平方向の配置の場合:d-flex justify-content-center

垂直方向および水平方向の位置合わせの場合:d-flex align-items-center justify-content-center

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center container">
  <div>I am in Center</div>
</div>

2.CSS3

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container center">
    <div>I am in Center</div>
</div>

score 27 · Accepted Answer

私の友人からのテクニック：

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

デモはこちら

score 22 · Accepted Answer

ブロック要素を中央に配置するには ( Internet Explorer 9以降で機能します)、ラッパーが必要divです。

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

score 16 · Accepted Answer

それらはすべて、div内で垂直に配置する必要があります

どのように調整しましたか？画像の上部がテキストの上部に揃えられていますか？

画像の1つは、div内に絶対的に配置する必要があります。

DIVに対して絶対的に配置されていますか？おそらくあなたはあなたが探しているものをスケッチすることができます...？

fdは、絶対測位の手順と、H1画像が要素とインラインで表示されるように要素の表示を調整する手順について説明しました。vertical-alignこれに、スタイルを使用して画像を整列できることを追加します。

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...これにより、ヘッダーと画像が一緒になり、上端が揃えられます。他の配置オプションがあります。ドキュメントを参照してください。DIVをドロップして、要素内の画像を移動することも有益な場合があります。H1これにより、コンテナーにセマンティック値が提供され、H1：の表示を調整する必要がなくなります。

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

score 16 · Accepted Answer

ほとんどすべてのメソッドで高さを指定する必要がありますが、多くの場合、高さはありません。

そこで、高さを知る必要のない CSS 3 の 3 行のトリックを次に示します。

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

IE9でもサポートされています。

ベンダー接頭辞:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

出典:わずか 3 行の CSS でなんでも垂直方向に整列

score 16 · Accepted Answer

この式を使用すると、常にクラックなしで機能します。

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

score 11 · Accepted Answer

私の秘訣は、1 行 1 列の div 内にテーブルを配置し、幅と高さを 100% に設定し、プロパティvertical-align:middleを設定することです。

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

フィドル: http://jsfiddle.net/joan16v/sbqjnn9q /

score 4 · Accepted Answer

CSS 3 を使用して div 内の複数のテキスト行を垂直方向に揃える新しい回避策を見つけました (また、UI を美しくするためにブートストラップ v3 グリッドシステムも使用しています)。これは次のとおりです。

.immediate-parent-of-text-containing-div {
    height: 50px;         /* Or any fixed height that suits you. */
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

私の理解では、要素を含むテキストの直接の親には、ある程度の高さが必要です。

score 3 · Accepted Answer

デフォルトでは、h1 はブロック要素であり、最初の img の後の行にレンダリングされ、ブロックの次の行に 2 番目の img が表示されます。

これが発生しないようにするには、h1 をインラインフロー動作に設定します。

#header > h1 { display: inline; }

imgを div 内に絶対的に配置する場合、これが正しく機能する前に、含まれる div を「既知のサイズ」に設定する必要があります。私の経験では、 position 属性をデフォルトから変更する必要もあります - position: relative は私にとってはうまくいきます:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

それが機能する場合は、必要な効果を得るために必要な最小限の属性を取得するために、div.header から高さ、幅、位置の属性を徐々に削除してみてください。

アップデート：

Firefox 3 で動作する完全な例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

score 3 · Accepted Answer

CSS 関数計算を使用して要素のサイズを計算し、それに応じて子要素を配置することができます。

HTML の例:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

そしてCSS：

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;
}

.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}

a {
    color: white;
    text-decoration: none;
}

ここで作成されたデモ: https://jsfiddle.net/xnjq1t22/

このソリューションは、レスポンシブdiv heightでwidthもうまく機能します。

注: calc関数は、古いブラウザーとの互換性についてテストされていません。

score 1 · Accepted Answer

div 内で 1 セルテーブルを使用するだけです。セルとテーブルの高さを 100% に設定するだけで、垂直方向の配置を使用できます。

div 内の 1 セルテーブルは垂直方向の配置を処理し、石器時代まで後方互換性があります。

score 0 · Accepted Answer

私にとっては、次のように機能しました。

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

「a」要素は、Bootstrap クラスを使用してボタンに変換され、外側の「div」内で垂直方向に中央揃えになりました。

score 0 · Accepted Answer

私は 1 年以上前から次のソリューション (位置と行の高さなし) を使用しており、Internet Explorer 7とInternet Explorer 8でも動作します。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

score -3 · Accepted Answer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

score -3 · Accepted Answer

これだけ：

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

div 内の 1 セルテーブルは垂直方向の配置を処理し、石器時代まで後方互換性があります。

score -8 · Accepted Answer

<div id="header" style="display: table-cell; vertical-align:middle;">

...

またはCSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

ブラウザのカバレッジ

html - div 内の要素を垂直方向に揃えるにはどうすればよいですか?

28 に答える 28

要素を縦横に整列

1. ブートストラップ 4.3+

2.CSS3

Related

Reference