CSSのline-hightで文字の縦位置を真ん中にできる

heightをとった要素に文字を入れると文字の縦位置は上揃えになる。

横位置は、text-align: center;で真ん中揃えにしている。

heightと同じ高さでline-heightを入れる

line-heightをheightと同じ高さにすると、縦位置を要素の真ん中に配置できる。

※2行以上の場合はこの小技は使えない。

.box1 {
    width: 300px;
    height: 300px;
    background: #f00;
    text-align: center;
    color: #fff;
    /* line-heightをheightと同じ高さに */
    line-height: 300px;
}

実装後

インスタでHTML,CSSの小技を配信中

タイトルとURLをコピーしました