CSS
LINEでログイン
Googleでログイン
Twitterでログイン
問題17：positionで要素を上下中央に寄せよう
コーディングをしていると頻繁に使いたくなる上下中央寄せを使用する問題です。
作成してあるサイトタイトル「忍者CODE」をpositionプロパティを使って上下中央に表示してみましょう。
作成してあるサイトタイトル「忍者CODE」をpositionプロパティを使って上下中央に表示してみましょう。
あらかじめエディタに書くコード
<header class="header">
<h1 class="header_title">
忍者CODE
</h1>
</header>
¥HTML¥
h1 {
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 100px;
background: #6699CC;
}
.header_title {
position: absolute;
}
¥CSS¥
期待する画面
解答ソースコード
.header_title {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
¥CSS¥
補足
今回指定していたpaddingとmarginの指定は、ブラウザで用意されているデフォルトの設定を無効化する為の処理になります。
余白が入ったままになると中心に表示されない場合があるので、あらかじめ設定しておくか、リセットCSSを用意しておきましょう。
余白が入ったままになると中心に表示されない場合があるので、あらかじめ設定しておくか、リセットCSSを用意しておきましょう。
完了にする！
活動記録をTweetする
position:absolute;を指定した子要素にtop: 50%;、left 0;、transform: translateY(-50%);
}を指定します。
transformY(-50%);を指定すると、要素の大きさの50%(半分)だけ戻す事ができます。つまり今回であれば、忍者CODEの文字の高さの半分を戻すという事になります。
そうすることで小さなずれが修正され、中心に表示することができます。