HTML_CSS
Googleでログイン
問題6：文字を浮かせて真ん中に配置しよう
block要素の中に文字を浮かせて表示させましょう。
浮かせた文字はblock要素のど真ん中に設置するようにしましょう。
見本参考にしてください。
浮かせた文字はblock要素のど真ん中に設置するようにしましょう。
見本参考にしてください。
あらかじめエディタに書くコード
<div>
<p>ど真ん中</p>
</div>
¥HTML¥
期待する画面
解答ソースコード
<div>
<p>ど真ん中</p>
</div>
¥HTML¥
div {
position: relative;
width: 300px;
height: 300px;
background-color: #0e6edf;
}
p {
color: #fff;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
¥CSS¥
補足
positionは、ページ上で要素がどのように配置されるかを設定できる重要なプロパティです。多くのWebサイトで使用されています。
設定できる値は、今回登場したふたつ以外にも、fixedやsticky、staticが用意されています。
Webページ上で画面をスクロールしてもずっと追尾してくるヘッダーやバナーを見たことがあるかと思いますが、あれらもこのpositionプロパティを使用して表示されています。
設定できる値は、今回登場したふたつ以外にも、fixedやsticky、staticが用意されています。
Webページ上で画面をスクロールしてもずっと追尾してくるヘッダーやバナーを見たことがあるかと思いますが、あれらもこのpositionプロパティを使用して表示されています。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
親要素にrelativeを子要素にabsoluteと覚えましょう。
真ん中にする方法ですが、子要素にabsoluteを付与した状態で top: 50%;left: 50%;transform: translate(-50%, -50%);を付与する事でど真ん中に設置されるようになります。
また、ここで使用しているmargin: 0;はpタグにデフォルト値で設定されているmarginを0にしています。