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

2022年05月05日2025年01月27日

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

line-height は使用しない

自動翻訳されて複数行になってしまった場合、高さを指定しているとその高さからはみ出る場合がある。

なのでline-height 等は使用しない。

メニューでaのクリック範囲を広げて中央に置く

HTML

<ul class="pg-HeaderNavPC__List">
  <li class="pg-HeaderNavPC__Item">
    <a class="pg-HeaderNavPC__Link" href="#">
      Top
    </a>
  </li>
</ul>

CSS

親要素

.pg-HeaderNavPC__List {
  display: flex;
}

子要素

.pg-HeaderNavPC__Item {
  display: flex;
}

孫要素

.pg-HeaderNavPC__Link {
  display: flex;
  align-items: 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;
}