2

短くて簡単ですが、div、Javascript、jQuery などを使用せずに、情報テキストなどの要素を完全に中央揃え (H/V) にするために多くの方法を試しました。

問題はこれが機能しないことであり、さまざまな方法がありますが、クロスブラウザー互換性を取得しようとして髪を失っています. そして、それはとてもシンプルでなければなりません。

たとえば、次のシナリオでは、FF21 は、論理的な理由もなく、50% のマージントップを 100% と解釈します。(ただし、モバイル デバイスにはありません)。

私は使用しています<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />

関連する CSS:

body {
    margin: 50% 0 0;
    padding: 0;
    border: 0;
    display: block;
    vertical-align: middle; /* removing this made no real difference at all */
    font-family: Helvetica, Arial, MS Sans Serif;
    font-size: 11pt;
    text-align:center;
    background-color: rgb(10, 50, 100);
    color: #ddd;
}

ノート：

  • Firefox では、予期される垂直方向のセンタリングは、25% のマージントップに設定されています (これは、モバイル ブラウザーでは間違っているように見えます)。
  • HTML5 の使用
  • あらゆる形式のスクリプトと事前計算された負のマージンを回避しようとしています。ブラウザは、要求どおりに適切に中央に配置されるはずです。

JS フィドル: http://jsfiddle.net/sfaVg/

4

1 に答える 1

3

テキストを含む要素がなければ、希望どおりに真ん中に配置できるとは思えません。適切なマークアップを記述したら (<p>たとえば、段落を所属する場所に置く)、次の css を使用することは可能です。

p {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

また、そのコンテナ（bodyあなたの場合）がdisplay:table;を取得することを確認してください。および 100% 幅/高さ

http://jsfiddle.net/sfaVg/3/のデモ

また、ボーナスの代替方法 (2 つのコンテナーが必要) は、http://zoffix.com/new/absolute-center-random-width-height.htmlにあります。

センタリング対象の寸法がわかっている場合の 3 つ目の解決策: http://reisio.com/examples/deadcenter/

于 2013-06-05T08:31:50.720 に答える