ログイン
問題12

ブロック要素内の文字を中央揃えにしよう

アイコン画像

問題12:ブロック要素内の文字を中央揃えにしよう

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

エディターのアイコンあらかじめエディタに書くコード

                <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にして解決しました。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる