ログイン

問題12 中央揃えにしよう2

CSSAnimationの問題

CSSAnimation

中央揃えにしよう2

問題

今回はブロック要素に直に文字が入っているときに中央揃えにするやり方です。

自分の環境に書くコード

              <div class="box">あいうえお</div>
¥HTML¥
            
              .box{
  border: 2px solid black;
  width: 300px;
  height: 100px;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              .box{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
¥CSS¥
            
答えのアイコン

解説

まず必ずできてほしいのはtext-alignをcenterにすることです。これは多くの方が出来たかと思います。次に問題なのがvertical-alignです。divは初期値ではdisplayがblockになっています。しかし、vertical-alignが効くのはインライン要素とテーブルセルだけなんです。なので今回はdisplayをtable-cellにして解決しました。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!