【CSS】垂直方向の中央に揃えるプロパティが効かない。

2022年05月05日2023年12月01日

タップで読みたいところにジャンプします

line-height と vertical-align を組み合わせる。

<div class="tatetyuo_oya">
 <span class="tatetyuo_ko1">
  インライン要素
 </span>
</div>

.tatetyuo_oya{
  border: 5px dotted blue;
  height:200px;
}

.tatetyuo_ko1{
  border: 5px dotted red;
  font-size: 30px;
  color:yellow;
  line-height:200px;
  vertical-align: center;
}

<div class="tatetyuo_oya">
  <div class="tatetyuo_ko2">
    ブロック要素
  </div>
</div>

.tatetyuo_oya{
  border: 5px dotted blue;
  height:200px;
}

.tatetyuo_ko2{
  border: 5px dotted red;
  font-size: 30px;
  color:yellow;
  line-height:200px;
  vertical-align: center;
}

親要素	–
子要素	line-height:200px; vertical-align:center;

記載する場所とコード

インライン要素、ブロック要素に親要素の高さと同じの行の高さを与えて、垂直方向の中央揃えにする。

padding で縦方向の中央に揃える。

<div class="tatetyuo_oya">
 <div class="tatetyuo_ko2">
  ブロック要素
 </div>
</div>

.tatetyuo_oya{
  border: 5px dotted blue;
  padding: 85px 0px;
}

.tatetyuo_ko1,.tatetyuo_ko2{
  border: 5px dotted red;
  font-size: 30px;
  color:yellow;
}

親要素	padding:85px 0px;
子要素	–

記載する場所とコード

これは邪道なのかなと思いつつも、方法としてメモしておくよ。
親要素の高さ=フォントのサイズ+パディングの値×2 で計算したよ。

display と align-itemsを組み合わせる。

<div class="tatetyuo_oya">
  <span class="tatetyuo_ko1">
    インライン要素
  </span>
  <div class="tatetyuo_ko2">
    ブロック要素
  </div>
</div>

tatetyuo_oya{
  border: 5px dotted blue;
  height:200px;
  display :flex;
  align-items: center;
}

.tatetyuo_ko1,.tatetyuo_ko2{
  border: 5px dotted red;
  font-size: 30px;
  color:yellow;
}

親要素	display:flex; align-items: center;
子要素	–

記載する場所とコード

親要素に「display:flex;」を書くことで、子要素をフレックスアイテム化して、「align-items:center;」が効くようにする。

display と align-self を組み合わせる。

<div class="tatetyuo_oya">
  <span class="tatetyuo_ko1">
    インライン要素
  </span>
  <div class="tatetyuo_ko2">
    ブロック要素
  </div>
</div>    </div>

.tatetyuo_oya{
  border: 5px dotted blue;
  height:200px;
  display :flex;
}

.tatetyuo_ko1,.tatetyuo_ko2{
  border: 5px dotted red;
  font-size: 30px;
  color:yellow;
  align-self:center;
}