忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
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;
    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%);を付与する事でど真ん中に設置されるようになります。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET