web-dev-qa-db-ja.com

Divの要素を垂直方向に揃える方法は？

私は二つの画像とh1を持ったdivを持っています。それらのすべては、互いに隣接して、div内で垂直方向に整列する必要があります。

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

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

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
htmlcssvertical-alignment
646
Abdu

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

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

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

手短に （そしてリンク腐敗を防ぐために）：

  • インライン要素 （およびonlyインライン要素）は、vertical-align: middleを介してコンテキスト内で垂直方向に整列できます。ただし、「コンテキスト」は親コンテナ全体の高さではなく、テキストの高さです。 jsfiddleの例
  • ブロック要素の場合、垂直方向の配置はより難しく、特定の状況に強く依存します。
    • 内部要素が 固定の高さ を持つことができる場合は、その位置をabsoluteにして、そのheight、margin-topおよびtopの位置を指定できます。 jsfiddleの例
    • 中央の要素 が1行で構成されている場合 and その親の高さは固定されています その高さに合わせてコンテナのline-heightを設定するだけです。この方法は私の経験ではかなり用途が広いです。 jsfiddleの例
    • …そのような特別な場合がもっとあります。
816
Konrad Rudolph

Flexboxのサポートが増えているので、包含要素に適用されるこの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;
}
109
E. Serrano

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

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を使っても、結果は変わりません。

104
user2346571

それは私のために働きました：

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
25
Sameera Prasad Jayasinghe

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

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

_デモ_ ここ

21
abernier

ブロック要素を中心に配置するには（IE9以降で動作します）、ラッパーdivが必要です。

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

それらのすべてはdiv内で垂直方向に整列する必要があります。

how ？に揃えましたか？画像の上部がテキストの上部と揃っている？

画像の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>
16
Shog9

この公式を使用すれば、それはひび割れなしで常に働くでしょう：

#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>
15
Anita Mandal

私のトリックは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/ /

11
joan16v

ほとんどすべての方法で高さを指定する必要がありますが、多くの場合高さがありません。
それで、高さを知る必要のない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/ /

10
Shadowbob

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/

この解決策は、レスポンシブdivheightおよびwidthでもうまく機能します。

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

3
Dashrath

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

これを防ぐために、インラインフローの振る舞いをするようにh1を設定することができます。

#header > h1 { display: inline; }

Img をdiv の中に絶対配置することに関しては、これが適切に動作する前に、それを含むdivを "既知のサイズ"に設定する必要があります。私の経験では、position属性をデフォルトから変更する必要もあります。

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

それがうまくいく場合は、div.headerからheight、width、positionの各属性を段階的に削除して、必要な効果を得るための最小限の必須属性を取得してみてください。

更新：

これは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>
3
Mike Tunnicliffe

縦方向の中央に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/ /

3
Henk-Martijn

今日のように、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
Shivam

私の新しいお気に入りの方法は、CSSグリッドを使用することです。

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>
1
Stephen

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

Div内の1セルテーブルは垂直方向の整列を処理し、Stone Ageと下位互換性があります。

1
Joel Moses

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

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

0
BernieSF

これは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;
}
0
danigonlinea

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

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>
0
WasiF

＃3親子divの中央子divを作成する方法

  • 絶対位置決め方法
  • Flexboxメソッド

  • 変換/変換メソッド

    enter image description here

    デモ

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>
0
Vahid Akhtar

私は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>
0
Arsh