2016-07-07 4 views
0

私の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携帯での結果であり、あなたは白い余白が左右に同じであることがわかります。

enter image description here

しかし、今のiPhoneに:

enter image description here

divは右側にわずかに配置されています。それを中心に整列させるには何ができますか?ありがとう。注1

:私はこの問題はSO(iOSの対アンドロイド)に依存している場合はわからないので、私は質問のタイトルにiPhoneアンドロイドを書いたり、モバイルサファリVSブラウザ上(携帯クロム)。私はこれがサファリ問題ではないと思う。なぜなら、DivsはiPadとMacBookでOKだからだ。

注2:「位置合わせ」の問題ではない可能性があります.iPhoneでは、divが画面に合わせて「圧縮」されていないようです。あなたがでブロック3を表示したい場合は

+1

ブロックがビューポートよりも広いと思われる。はい。ブロックの幅は320ピクセルで、余白は4ピクセルです。 – madhushankarox

+1

幅を固定ピクセル幅ではなく%に設定 – ca8msm

+0

ブロック幅を100%に設定して余白を削除することができます。あなたが実際にパディングを必要とする場合は、4pxのパディングをコンテナに追加してください。 – madhushankarox

答えて

2

変更ブロックCSS

.block { 
    width: 100%; 
    height: 400px; 
    background-color: green; 
    display: flex; 
    justify-content: center; 
    align-content: center; 
} 

にあなたのCSSから、あなたの頭のタグに

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

削除div.containerこれを追加フルスクリーンで1行の時間:

<div class="container"> 
    <div class="col-lg-4"> 
     <div class="block"></div> 
    </div> 
    <div class="col-lg-4"> 
     <div class="block"></div> 
    </div> 
    <div class="col-lg-4"> 
     <div class="block"></div> 
    </div> 
    </div> 
+0

問題は、私がそれをすれば私の余白が緩んでいることです。スニペットを実行して「フルページ」をクリックした場合、デスクトップビューはまさにあなたが持っているビューでなければなりません。 –

+0

あなたはブロックがデスクトップモードで画面の100%を占めないようにすることを意味しますか?その場合は幅をあなたの要件に設定することができます。余白だけが必要な場合は、.blockクラスに余白を追加するだけで動作します。または身長を最小高さに変更しようとすると100vhになります。それがあなたが探しているものに合っているかどうかを確認してください。 – Aman

+0

うん、それは正しい:デスクトップモードでは、コンテナの最大幅は1000ピクセルで、ブロックはその間に余白を付けて表示されます(3の場合)。 –

関連する問題