ログイン
問題12

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

Web制作では、文字などの要素をY軸の真ん中に寄せる場面が多々あります。 頻繁に使う指定方法なので、この問題を通してしっかり頭に入れておきましょう。

アイコン画像

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

テキストの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軸の真ん中になります。
こちら、いざという時に役に立つので覚えておきましょう。
ログインして解答を見る

コメントのアイコン補足

今回の解答では、flexboxを用いた配置方法を使用しました。
端的にコードを書けるのが特徴で、簡単にレイアウトを作成することができます。
ただし、親要素と子要素の関係をしっかり理解していないと思うように動かないので、注意が必要です。
まずは、どんなものでもいいのでブロック要素とインライン要素を作り、それぞれflexboxを使った際の挙動の違いを確かめておきましょう。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる