2012-03-28 13 views
2

この質問の目的のために、スクリーンの中央に縦と横の両方にセンタリングされた単一の画像です。これは、次の要件がありますCSSを使用した画面上の画像のセンタリング - ランダムスクリーン/画像の寸法

  • クライアントの画面サイズが
  • 画像は、ユーザー定義であり、したがって、画像が完全にセンタリングされなければならない
  • 不明な寸法である(モバイル)は不明であるが、両方の上下水平方向のすべてのデバイス上の
  • 画像センタリングが

は、CSSの初心者くさいのビットなので(つまり、肖像画から風景まで)、画面回転により存続しなければならない、私が行って、こののみを作成しました私は同じように私の解決策に機能しますが、ハード方程式の代わりにCSSを使用するソリューションを探しています http://jsfiddle.net/error454/8YL9a/

:ところで私は、コンテンツを配置するためにJavaScriptを使用して、どのように知っていました。

+0

のですか? – MrGrigg

+0

私が実際に作成しなければならないもののための氷山の先端です。私がjavascriptと魔法の計算を使用すると、私は人生の製品の所有者になります。私は、Web開発者が私の不在の中で維持できる何かを好むだろう。 –

答えて

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。クリーンなマークアップとCSSなしでJSを実行するための唯一の方法。

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

編集2:今後の校正のために、prefixlessバージョンは、あなたのjavascriptの代わりに純粋なCSSを使用する利点は何ですか

display:box; 
box-orient:horizontal; 
box-pack:center; 
box-align:center; 
+0

フレキシブルボックスモデルはここに来ました! –

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/

+0

動作しません:http://jsfiddle.net/error454/t8qtn/ –

+0

更新されました:テーブルを使用することはできますが、年齢層のレイアウト目的で非推奨となっています... – evilpenguin