質問: html,css 全体的に真ん中寄せにする方法 表題の通り、全体的に真ん中寄せにする方法を教えてください。 width:1000px; margin-right: auto; margin-left : auto; →これで真ん中寄せにできたのですが、これだと画面の大きさが変わるとテキストが切れてしまいます。 そこで、 width:1000px; を width:100vw にすれば、テキストは可変され、切れる問題は解決するのですが、 margin-right: auto; margin-left : auto; これで真ん中寄せにならなくなってしまいました。 全体のテキストを可変にしつつ中央寄せにする方法を教えてください。 どうぞよろしくお願いいたします。 熊谷育実
回答: 枠をセンター寄せにして、画面の正面に配置したいのなら、margin: auto; で良いです。 幅に余裕があるから、センター寄せになるのです。 画面と枠の大きさが同じ以上だと、センター寄せなんて事は矛盾です。一杯一杯だから右も左も真ん中もありえません。 その想定は、画面を小さくする場合の想定ですよね? それなら最大幅を1000pxに決めて、それより小さくなる場合は画面100%で表示します。 width:100%; max-width:1000px; margin-right: auto; margin-left : auto; 追加で、 padding: 0 10px; とか追加すると左右に、画面端のベゼル枠とのスペースが出来て見やすいです。 (10pxの数値は変更/微調整してみましょう) ワイドモニターで見た場合に、枠をセンターにしたいのだと思いますが、 一般的には、タブレットやスマホでは枠が狭くなるので、センター寄せにはせず、横幅を目一杯利用してテキストを表示しますから、センター寄せの意味が無いです。 テキスト自体をセンター揃えにするのなら、 text-align:center; も加えます。 逆に、もっと幅広くしてみた想定なら、98%とか90%とか (画面の横幅が100%だとした想定で)%の数値を適当に変更してみてください。 width:96%; margin-right: auto; margin-left : auto;