前提・実現したいこと
以下の方法で4方向(上下左右)からの中央寄せ
を行いました。
HTML
1<head> 2 <style> 3 .body-background { 4 background-size: cover; 5 } 6 .container { 7 position: absolute; 8 top: 50%; 9 left: 50%; 10 -ms-transform: translate(-50%,-50%); 11 -webkit-transform : translate(-50%,-50%); 12 transform : translate(-50%,-50%); 13 } 14 </style> 15</head> 16 17<body class="body-background"> 18 <div class="container"> 19 1111111111<br> 20 2222222222<br> 21 3333333333<br> 22 4444444444<br> 23 5555555555<br> 24 6666666666<br> 25 7777777777<br> 26 8888888888<br> 27 9999999999<br> 28 aaaaaaaaaa<br> 29 </div> 30</body>
ブラウザにて上記内容を表示したところ、
ブラウザの中央に文字が出ることを確認できました。
しかしながら、拡大やブラウザを小さくしたりしたところ、
1111111111
などが枠外(上の方)にハミ出てしまいました。
※上にスクロールするも、移動できる範囲を超えてしまい表示することができません。
質問
1111111111
が枠外にハミ出ないように防止する策はございますでしょうか?
極力 HTMLとCSSだけで完結できるとうれしいです。
上記ご教示いただけると助かります。
初歩的な質問かもしれませんが、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。