Qraft(クラフト) 資格・学習クイズアプリ

CSS基礎 練習問題 57:ブロック要素の水平配置

幅を指定したブロックレベルの要素(divタグなど)を、親要素の中で水平方向に中央揃えにしたい場合、正しいCSSの書き方はどれか。

  1. 要素の左右のマージンに「auto」を設定して、親要素の中央に配置する。
  2. 要素の左右のパディングに「auto」を設定して、親要素の中央に配置する。
  3. 要素のテキストアラインに「center」を設定して、親要素の中央に配置する。
  4. 要素のフローティングに「center」を設定して、親要素の中央に配置する。
  5. 要素のバーティカルアラインに「middle」を設定して、親要素の中央に配置する。
正解と解説を見る
正解:要素の左右のマージンに「auto」を設定して、親要素の中央に配置する。

幅が指定されたブロック要素を親要素の水平方向の中央に配置する場合、左右の余白を自動計算させるのが適切なため、該当する説明が正解です。

【正解の理由】
ブロックレベル要素に幅(width)を持たせた上で、左右のmargin(マージン)に「auto」を指定すると、左右の余白が均等に自動計算され、水平中央寄せになります。

【不正解の理由】
• 「左右のパディングに『auto』を設定する」という説明は、paddingにはautoという値を使えないため誤り
• 「テキストアラインに『center』を設定する」という説明は、中のテキストやインライン要素にしか効かないため誤り
• 「フローティングに『center』を設定する」という説明は、floatプロパティにcenterという値は存在しないため誤り
• 「バーティカルアラインに『middle』を設定する」という説明は、垂直方向の配置であり水平中央寄せにはならないため誤り

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)