0

jquery mobileとCSS3（javascript計算なし）を使用して、高さと幅が固定されているダイアログ（750x360）を画面の中央に配置しようとしています。これはIPadモバイルサファリで実行されますが、これまでのところ、そのブラウザで動作するバージョンのcalc（）は見つかりませんでした。

私は現在、javascriptを使用してmargin-topを計算することで中央に配置しています。ウィンドウの可変高さとダイアログの固定高さであるパラメータ。ただし、標準を満たすためにこれを実装から削除し、可能であればCSS/jqueryメソッドのみを使用する必要があります。

これを行う方法はありますか？

jquery UIとjqueryモバイルライブラリの両方をインポートしているので、それらのすべてのメソッドにアクセスできます。

4

1 に答える 1

2

div垂直方向と水平方向の中央に配置する方法の例を次に示します。

#center {
   background-color: red;
   width: 100px;
   height: 100px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px; /* half the height */
   margin-left: -50px; /* half the width */        
}​

jsfiddleの例

この方法で要素を配置するposition:absoluteには、他の要素を気にすることなく、要素を配置する場所を指定できます。要素を中央に配置するに50%は、コンテナサイズに配置します。しかし、そこで停止すると、要素の左上隅が中央に配置されます。marginしたがって、 'を追加する必要があります。

これが正しい方向に役立つことを願っています。

于 2012-06-27T16:25:01.917 に答える