忍者CODE

ログイン

12
文字をY軸の真ん中にしてみよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
テキストのY軸の中央に文字を置いてみよう。

HTML/CSSファイルに記述してください。
見本を参考にCSSファイルに追記し問題をといてください。
自分の環境に書くコード
            <div class="text-wrap">
    <div>このテキストをY軸中央にしましょう</div>
    <span></span>
</div>
¥HTML¥
          
            .text-wrap {
    position: relative;
    width: 400px;
    height: 60px;
    border: 1px solid;
    padding: 12px;
}
span {
    position: absolute;
    top: 50%;
    width: 400px;
    height: 1px;
    display: inline-block;
    background: #0e6edf;
}
¥CSS¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div class="text-wrap">
  <div>このテキストをY軸中央にしましょう</div>
  <span></span>
</div>
¥HTML¥
          
            .text-wrap {
    position: relative;
    width: 400px;
    height: 60px;
    border: 1px solid;
    padding: 12px;
    display: flex;
    align-items: center;
}
span {
    position: absolute;
    top: 50%;
    width: 400px;
    height: 1px;
    display: inline-block;
    background: #0e6edf;
}
¥CSS¥
          
答えのアイコン

解説

Y軸(縦軸)を中央揃いにするには、2通りあります。

一つ目は、初級六でやった文字を浮かせて中央配置にするやり方です。

もう一つは、今回のように親要素に対してdisplay: flex;を付与し
align-items: center;を付与してあげる事で、要素はY軸に真ん中になります。
こちら、いざという時に役に立ちます。
お役立てください。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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