html,css 全体的に真ん中寄せにする方法

表題の通り、全体的に真ん中寄せにする方法を教えてください。

width:1000px;
margin-right: auto;
margin-left : auto;
→これで真ん中寄せにできたのですが、これだと画面の大きさが変わるとテキストが切れてしまいます。

そこで、
width:1000px;
を
width:100vw
にすれば、テキストは可変され、切れる問題は解決するのですが、
margin-right: auto;
margin-left : auto;
これで真ん中寄せにならなくなってしまいました。

全体のテキストを可変にしつつ中央寄せにする方法を教えてください。
どうぞよろしくお願いいたします。



熊谷育実

No.3 ベストアンサー 回答者： naokita 回答日時： 2020/07/13 17:12

枠をセンター寄せにして、画面の正面に配置したいのなら、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;

この回答へのお礼

width:100%;
max-width:1000px;
margin-right: auto;
margin-left : auto;

これでできました！
できないできないと困っていたら、突然できました！
width:100%;
これを追加すれば良かったのですね、、、

ありがとうございました！

お礼日時：2020/07/13 22:06

No.2 回答者： fujillin 回答日時： 2020/07/13 14:12

こんにちは

＞テキストが切れてしまいます。
「テキストが切れる」ということの意味がよくわかりません。
もしも「画面からはみ出す」という意味であれば、1000pxの固定幅の指定をしているので、画面がそれより小さい時には表示しきれないだけです。

＞width:100vw
＞これで真ん中寄せにならなくなってしまいました。
「100vw」の意味を理解していますか？
ウィンドウサイズ（幅）と同じ幅の意味です。
対象としている要素の祖先要素にmarginやpaddingが一切なければ、丁度画面幅に表示されますが、デフォルト表示等のままだとhtmlやbodyにいくらかの余白が設定されているので、その分右側によるはずです。

＞全体のテキストを可変にしつつ中央寄せにする方法を教えてください。
HTMLの構成やCSSが不明なのでなんとも言えませんが、ご質問文の雰囲気から推測すると（推測なので当たるも八卦ですが…）
　width: 100%;
だけを指定しておけば、それでよさそうな気がしますけれど？？
もしも、上記で中央よせにならないなら、対象要素の親要素がすでにどちらかに寄って配置されていることを意味します。（あるいはpaddingを左右不均衡にとっているか・・・など）


どうしても100vw（=画面幅いっぱい）の指定をしたいのであれば…
　width:100vw;
　margin-left: calc((100% - 100vw) / 2);
とすれば（多分：HTMLが不明なのでこちらも多分です）祖先要素のmarginなどを無視して、画面幅いっぱいになるのではと思います。
ただし、祖先要素に不均衡なmarginやpaddingがある場合には中央になりません。
また、祖先要素にoverflow:hiddenの設定がしてある場合には表示の一部が切られることになります。

この回答へのお礼

ありがとうございました！！

お礼日時：2020/07/13 22:07

No.1 回答者： nitto3 回答日時： 2020/07/13 13:30

全体のことを言ってるなら、最初に<center>を入れる。

テキストのことなら、その都度<center>を入れる。

この回答へのお礼

ありがとうございました！！

お礼日時：2020/07/13 22:07