☰

なぜ vertical-align: middle が span または div で機能しないのですか? 質問する

tag-icon • tag-icon html css
なぜ vertical-align: middle が span または div で機能しないのですか? 質問する

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/

ベストアンサー1

CSS3 の使用:

<div class="outer">
   <div class="inner"/>
</div>

CSS:

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

要素を水平に揃えるには「justify-content: center;」を使用します

注意: 古いIEでは動作しない可能性があります

おすすめ記事