ログイン

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

HTML_CSSの問題

HTML_CSS

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

文字を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」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!