div内の要素を垂直方向に整列させるにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/79461

  •  09-06-2019
  •  | 
  •  

質問

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

画像の 1 つが必要です absolute div内に配置されます。

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

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
役に立ちましたか？

解決

わあ、この問題は人気がありますね。それは誤解に基づいています vertical-align 財産。この優れた記事では次のように説明されています。

理解 vertical-align, 、または「コンテンツを垂直方向に中央揃えにする（しない）方法」 ギャビン・キスナー著。

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

一言で言えば (リンクの劣化を防ぐため):

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

他のヒント

フレックスボックスのサポートが増加しているため、この CSS を包含要素に適用すると、包含される項目が垂直方向の中央に配置されます。

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

Explorer 10 および古い (4.4 未満) 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;
}

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

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

明らかに、 .class または #id, 、結果は変わりません。

それは私にとってはうまくいきました：

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

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

私の友人から教えてもらったテクニックです。

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

デモ ここ

それらはすべて 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>

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

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

この公式を使用すると、亀裂が入ることなく常に機能します。

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

ほとんどすべてのメソッドで高さを指定する必要がありますが、多くの場合、高さはありません。
そこで、高さを知る必要がない CSS3 の 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%);
}

ソース： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

私のトリックは、div 内に 1 行 1 列のテーブルを配置し、幅と高さを 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/sbq​​jnn9q/

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

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

#header > h1 { display: inline; }

画像の絶対的な配置については div内で, 、これが適切に機能する前に、含まれる div を「既知のサイズ」に設定する必要があります。私の経験では、position 属性をデフォルトのposition から変更する必要もあります。相対的には私にとってはうまくいきます：

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

CSS を使用して垂直方向の中央に配置すると、外側のコンテナをテーブルのように機能させ、コンテンツをテーブルのセルとして機能させることができます。この形式では、オブジェクトは中央に留まります。:)

例として JSFiddle に複数のオブジェクトをネストしましたが、中心となるアイデアは次のようなものです。

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

複数のオブジェクトの例:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

結果

Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

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 関数は、古いブラウザとの互換性についてテストされていません。

今日の時点で、CSS3 を使用して 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%;
}

私の理解によると、要素を含むテキストの直接の親にはある程度の高さが必要です。あなたにも役立つことを願っています。ありがとう！

要素を垂直方向と水平方向に整列させるには 2 つの方法があります

enter image description here

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

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

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

.container {
    height: 180px;
    width:100%;
}
<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 bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2.CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>

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

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

私は 1 年以上、次のソリューション (位置決めや行の高さなし) を使用してきましたが、IE 7 と 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>

これは、div 内の i 要素に対する私の個人的な解決策です。

JSFiddle の例

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

私の場合、それは次のように機能しました。

<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」内で垂直方向の中央に配置されます。

<div class="outdiv">
  <div class="indiv">
     <span>test1</span>
     <span>test2</span>
  </div>
</div>


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

これだけ:

<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 セルのテーブルは垂直方向の配置を処理し、石器時代までの下位互換性があります。

<!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>

ここでは、別の (応答性の高い) アプローチを示します。

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

私は Web プログラミングを始めたばかりの .NET 担当者です。CSS は使用しませんでした (まあ、少しだけ)。ちょっとした JavaScript を使用して、jQuery の .css 関数とともに垂直方向の中央揃えを実現しました。

テスト結果をすべて投稿しているだけです。おそらくあまりエレガントではありませんが、これまでのところ機能しています。

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

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

...

またはCSS

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

ブラウザのカバー範囲

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top