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

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

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;
}
親要素 display:flex;
子要素align-self:center;
記載する場所とコード

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

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