ログイン

問題6 文字を浮かせて真ん中に配置しよう

HTML_CSSの問題

HTML_CSS

別の要素である文字を真ん中に配置するには、その文字の要素を浮かせる必要があります。この要素を浮かせる方法が分かれば、今後配置をコンロトールできるようになるので是非挑戦してみましょう!

文字を浮かせて真ん中に配置しよう

問題

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: relative;/position: absolute;を使います。
親要素にrelativeを子要素にabsoluteと覚えましょう。

真ん中にする方法ですが、子要素にabsoluteを付与した状態で top: 50%;left: 50%;transform: translate(-50%, -50%);を付与する事でど真ん中に設置されるようになります。
また、ここで使用しているmargin: 0;はpタグにデフォルト値で設定されているmarginを0にしています。
ログインして解答を見る
positionは、ページ上で要素がどのように配置されるかを設定できる重要なプロパティです。多くのWebサイトで使用されています。
設定できる値は、今回登場したふたつ以外にも、fixedやsticky、staticが用意されています。
Webページ上で画面をスクロールしてもずっと追尾してくるヘッダーやバナーを見たことがあるかと思いますが、あれらもこのpositionプロパティを使用して表示されています。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!