問題
12
CSSアニメーション
ブロック要素内の文字を中央揃えにしよう
CSSアニメーションの問題に挑戦しよう！
問題
「ブロック要素内の文字を中央揃えにしよう」
今回はブロック要素に直に文字が入っているときに中央揃えにするやり方です。
あらかじめエディタに書くコード
<div class="box">あいうえお</div>
¥HTML¥
.box{
border: 2px solid black;
width: 300px;
height: 100px;
}
¥CSS¥
期待する画面
解答と解説（ブロック要素内の文字を中央揃えにしよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まず必ずできてほしいのはtext-alignをcenterにすることです。これは多くの方が出来たかと思います。
次に問題なのがvertical-alignです。divは初期値ではdisplayがblockになっています。しかし、vertical-alignが効くのはインライン要素とテーブルセルだけなんです。なので今回はdisplayをtable-cellにして解決しました。
