2

この質問の目的のために、画面の中央に垂直方向と水平方向の両方で中央に配置された単一の画像である Web ページを作成する必要があります。次の要件があります。

  • クライアントの画面サイズが不明（モバイル）
  • 画像はユーザー定義であるため、寸法が不明です
  • 画像は、すべてのデバイスで垂直方向と水平方向の両方で完全に中央に配置する必要があります
  • 画像のセンタリングは、画面の回転 (つまり、縦向きから横向き) を通じて持続する必要があります。

少し CSS 初心者なので、javascript を使用してコンテンツを配置する唯一の方法でこれを作成しました: http://jsfiddle.net/error454/8YL9a/

私のソリューションと同じように機能するが、難しい方程式の代わりに CSS を使用するソリューションを探しています。

4

2 に答える 2

2 
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

CSS3 プロパティ、不適切なサポート: webkit、mozilla。クリーンなマークアップと JS を使用しない CSS でそれを行う唯一の方法です。

編集 1: http://jsfiddle.net/t8qtn/6/

編集 2: 将来の校正のために、プレフィックスなしのバージョンは

display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
于 2012-03-28T21:59:06.480 に答える
0

これはセンタリングに関する素晴らしい記事です: http://www.w3.org/Style/Examples/007/center.en.html

次のようになります。

.vcenter { display:table-cell; vertical-align:middle; }
.hcenter { display:block; margin-left:auto; margin-right:auto; }

次に、両方のクラスを画像に適用します。

<img class="vcenter hcenter" src="..."/>

更新: ここのようなテーブルを使用するだけですhttp://www.sorinvasilescu.ro/

于 2012-03-28T21:34:51.877 に答える