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;
}
親要素 | display:flex; |
子要素 | align-self:center; |
親要素に 「display:flex;」を書くことで、子要素をフレックスアイテム化して、「align-self:center;」が効くようにする。
コメント