私のHTMLには、text-align: center;
の外側のdiv内にdisplay: inline-block
という数の内部divがあります。これは予想される動作です:大画面では、いくつかのdivが並んで表示されます(いくつのdivがそれぞれの内側divと外側divのサイズに依存するか)、セットは中央揃えになります。画面の幅が狭くなると、divは再配置され、小さなスマートフォンの画面では、行ごとにdivが1つしかなく、中心が整列します。Divの中心はAndroidではアライメントされていますが、iPhoneではありません
これは私の最小限かつ検証可能なコードです:あなたは、ウィンドウのサイズを変更する場合は
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <meta charset="UTF-8">
\t \t <title>Align center</title>
\t \t <style type="text/css">
\t \t \t body {
\t \t \t \t background-color: white;
\t \t \t }
\t \t \t div.container {
\t \t \t \t margin: auto;
\t \t \t \t max-width: 1000px;
\t \t \t \t text-align: center
\t \t \t }
\t \t \t div.block {
\t \t \t \t margin: 4px;
\t \t \t \t display: inline-block;
\t \t \t \t width: 320px;
\t \t \t \t height: 400px;
\t \t \t \t background-color: green;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t <div class="container">
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t \t <div class="block"></div>
\t \t </div>
\t </body>
</html>
あなたはdiv要素を再配置する(SOスニペットは、この動作を確認することは非常に小さい表示されます「フルページ」をクリックしてウィンドウのサイズを変更することができます)。
私の問題:スマートフォンで
が行当たりわずか1 div要素であり、これは私がしたい正確に何です。しかし、私の問題は、Androidの携帯電話で完璧に位置づけられているにもかかわらず、divがiPhone上で中心に位置合わせされていないことです。上記のコードを使用して
が、これはAndroid携帯での結果であり、あなたは白い余白が左右に同じであることがわかります。
しかし、今のiPhoneに:
divは右側にわずかに配置されています。それを中心に整列させるには何ができますか?ありがとう。注1
:私はこの問題はSO(iOSの対アンドロイド)に依存している場合はわからないので、私は質問のタイトルにiPhoneアンドロイドとを書いたり、モバイルサファリVSブラウザ上(携帯クロム)。私はこれがサファリ問題ではないと思う。なぜなら、DivsはiPadとMacBookでOKだからだ。
注2:「位置合わせ」の問題ではない可能性があります.iPhoneでは、divが画面に合わせて「圧縮」されていないようです。あなたがでブロック3を表示したい場合は
ブロックがビューポートよりも広いと思われる。はい。ブロックの幅は320ピクセルで、余白は4ピクセルです。 – madhushankarox
幅を固定ピクセル幅ではなく%に設定 – ca8msm
ブロック幅を100%に設定して余白を削除することができます。あなたが実際にパディングを必要とする場合は、4pxのパディングをコンテナに追加してください。 – madhushankarox