html - vertical-align: middle がスパンまたは div で機能しないのはなぜですか?

Question

spanまたはdiv要素を別の要素内で垂直方向に中央揃えにしようとしていdivます。しかし、を入れvertical-align: middleても何も起こりません。display両方の要素のプロパティを変更しようとしましたが、何も機能しないようです。

これは私が現在私のウェブページで行っていることです:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

これが動作しないことを示す実装の jsfiddle です: http://jsfiddle.net/gZXWC/

score 223 · Accepted Answer

これが最善の方法のようです。最初の投稿からしばらく経ちましたが、今すべきことは次のとおりです。

.main {
  display: table;
  
  /* optional css start */
  height: 90px;
  width: 90px;
  /* optional css end */
}
        
.inner {
  border: 1px solid #000000;
  display: table-cell;
  vertical-align: middle;
}

<div class="main">
  <div class="inner"> This </div>
</div>

score 139 · Accepted Answer

これを試してみてください、私にとってはとてもうまくいきます：

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

score 35 · Accepted Answer

line-height を div を含むのと同じ高さに設定しても機能します

デモhttp://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

score 7 · Accepted Answer

ここでは、垂直方向の配置を行う 2 つの方法の例を示します。私はそれらを使用していますが、かなりうまく機能します。1 つは絶対配置を使用し、もう 1 つはflexboxを使用しています。

垂直方向の配置の例

display: flex;フレックスボックスを使用すると、要素を別の要素内に配置することができますalign-self。水平にも揃える必要がある場合は、コンテナー内でalign-itemsとを使用できます。justify-content

フレックスボックスを使用したくない場合は、position プロパティを使用できます。コンテナを相対、コンテンツを絶対にすると、コンテナ内でコンテンツが自由に移動できるようになります。したがって、コンテンツでtop: 0;andを使用するとleft: 0;、コンテナーの左上隅に配置されます。

次に、位置合わせするには、上と左の参照を 50% に変更するだけです。これにより、コンテンツの左上隅からコンテナの中心にコンテンツが配置されます。

したがって、これを修正して、コンテンツの半分のサイズを左と上に移動する必要があります。

score 6 · Accepted Answer

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

親 div を表として表示するように設定し、子 div を表セルとして表示するように設定します。次に、子 div で vertical-align を使用し、その値を middle に設定します。この子 div 内のすべてが垂直方向に中央揃えになります。

score 5 · Accepted Answer

これは、垂直方向の整列方法に関する素晴らしい記事です。私はフロートの方法が好きです。

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

そして対応するスタイル:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

score 4 · Accepted Answer

これが最新の最も簡単な解決策です。何も変更する必要はありません。中心にしたい div のコンテナに 3 行の CSS ルールを追加するだけです。大好きFlex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

ボーナス

値は、justify-content次のいくつかのオプションに設定できます。

flex-start、これにより、子 div が、その親コンテナーでフレックスフローが開始する場所に配置されます。この場合、それは上にとどまります。
center、子 div をその親コンテナーの中央に揃えます。子を中央に配置する親コンテナーにラッパーを配置するために、すべての子をラップする追加の div を追加する必要がないため、これは非常に便利です。そのため、これが真の垂直中央です ( column flex-direction. で同様に、をに変更するflow-directionとrow、水平中央になります。
flex-end、これにより、子 div が、その親コンテナーでフレックスフローが終了する場所に配置されます。この場合、下に移動します。
space-between、これにより、フローの最初から最後まですべての子が展開されます。デモの場合、別の子 div を追加して、それらが広がっていることを示します。
space-around、に似てspace-betweenいますが、フローの最初と最後に半分のスペースがあります。

score 4 · Accepted Answer

それは簡単です。display:table-cellメインクラスに追加するだけです。

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

このjsfiddleをチェックしてください！

score 0 · Accepted Answer

スパンまたは div 要素を別の div 内で垂直方向に中央揃えにするには、親 div に対して相対位置を追加し、子 div に対して絶対位置を追加します。これで、子 div を div 内の任意の場所に配置できます。以下の例では、水平方向と垂直方向の両方で中央揃えを行います。

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

score 0 · Accepted Answer

高さ 100% のテーブル内にコンテンツを配置し、メイン div の高さを設定するだけです

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

html - vertical-align: middle がスパンまたは div で機能しないのはなぜですか?

16 に答える 16

Related

Reference