HTML_CSS
Googleでログイン
問題12：文字をY軸の真ん中にしてみよう
テキストのY軸の中央に文字を置いてみましょう。
HTML/CSSファイルに記述してください。
見本を参考にCSSファイルに追記し、問題を解いていきましょう。
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¥
補足
今回の解答では、flexboxを用いた配置方法を使用しました。
端的にコードを書けるのが特徴で、簡単にレイアウトを作成することができます。
ただし、親要素と子要素の関係をしっかり理解していないと思うように動かないので、注意が必要です。
まずは、どんなものでもいいのでブロック要素とインライン要素を作り、それぞれflexboxを使った際の挙動の違いを確かめておきましょう。
端的にコードを書けるのが特徴で、簡単にレイアウトを作成することができます。
ただし、親要素と子要素の関係をしっかり理解していないと思うように動かないので、注意が必要です。
まずは、どんなものでもいいのでブロック要素とインライン要素を作り、それぞれflexboxを使った際の挙動の違いを確かめておきましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
一つ目は、初級六でやった文字を浮かせて中央配置にする方法です。
二つ目は、今回のように親要素に対してdisplay: flex;を付与し
align-items: center;を付与する事で、要素はY軸の真ん中になります。
こちら、いざという時に役に立つので覚えておきましょう。