html - 画面の中央に div ポップアップを配置する

Question

divaを水平方向と垂直方向の両方でセンタリングするために多くの検索を行いました。これはどこにでもある方法です。

div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}

divテーブル内にラップすることにより、水平方向と垂直方向の両方でa を中央に配置する新しい解決策を見つけました。私はie7以上と他のブラウザでテストしました。

例を次に示します: http://jsbin.com/ocenok/2/

最初の方法は、インターネットや SO などのどこにでもあり、事前に幅と高さの知識が必要であるか、通常は Javascript を介して計算されるのではないかと思っていました。

テーブルのアプローチは完璧に見え、javascript も固定の高さ/幅も必要としません。

テーブルアプローチに欠点はありますか?

（中央に配置したいdivの高さ/幅がわかりません。）

更新（私の質問をより明確にするために）：

私自身、非表形式/レイアウトデータにテーブルを使用するのは嫌いです。

私が望むことは、Javascript を使用して簡単に実現できることを知っています。
を使用してこれを達成できると考えdisplay:table、IE7 サポートを無効にしました。

しかし、私が理解しようとしているのは、単一の<table>要素を使用してこれを達成できる場合、欠点があればそれは何かということです。

HTMLAnswers here および同様の質問を確認すると、すべての有効な要素、構文、およびルールを使用しているにもかかわらず、誰もこの方法を推奨していません。

誰もがプレゼンテーションを処理するためにを使用することを推奨している場合、を使用javascriptして簡単に使用できる場合でも、CSSいくつかの欠点があるに違いありません。

コード :

  <table>
    <tr>
        <td>
            <div>This is div that needs to be centered.</div>
        </td>
    </tr>
</table>

次に、次の CSS を適用します。

table {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
}

table td {
    width : 100%;
    text-align: center;
}

div {
    width:100px;
    height:100px;
    background:pink;
  margin: 0 auto;
}

score 5 · Accepted Answer

以下の機能を参照し、必要に応じて変更してください

function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  console.log("The calculated position is:");
  console.log(top,left);
  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
  console.log('A jQuery selection:');
  console.log($('#lightbox'));
}

回答の HTML と CSS を更新しました:

HTML:

<div id="outer"><div id="inner"></div></div>

CSS:

#outer {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
    background:red;
}

#inner {
  width: 300px;
  height: 200px;
  margin-left: -150px;  /***  width / 2   ***/
  position: absolute;
  top: -100px;          /***  height / 2   ***/
  left: 50%;
    background:#ccc;
}

jqueryを使用してさらに更新し、ウィンドウのサイズを変更しても常に中央に留まります: http://jsfiddle.net/3aZZW/3/

デモ: http://jsfiddle.net/3aZZW/3/embedded/result/

score 2 · Accepted Answer

StatCounterによると、2012 年 11 月の時点で、IE7はデスクトップブラウザーの使用シェアの 0.87% しか占めていません。その測定値がどれほど正確かは明らかではありません。一部の国はおそらく不均衡に重み付けされており、サンプルセットはほぼ確実にユーザーの人口統計と正確に一致していません. しかし、IE7 を置き去りにすることで、実際にどれだけの損失を被るでしょうか? 一緒に行くのもいいかもしれませんdisplay: table;

その一方で、それは私を狂わせるdisplay: table;必要があります。これは、実行可能な代替手段に最も近いものです。

HTML

<div id="pg-centerer">
    <div id="shifter">
        <div id="item">content</div>
    </div>
</div>

CSS

#pg-centerer {
    position: absolute;
    left: 50%;
    top: 50%;
}

#shifter {
    position: relative;
    height: 40px;           /** Must set the height here. **/
    left: -50%;
}

#item {
    position: relative;
    top: -50%;
}

heightこれまでのところ、div#shifter要素の設定を回避する方法がわかりませんでした。これが実際のデモです。これは、Mac 10.8.1 FF 18、Safari 6.0、Chrome 25.0.1362.0 canary、および iOS Safari 6.0.1 でテストしました。

score 2 · Accepted Answer

テーブルを使用しない理由はいくつかあります。すでにここで議論されているものもあります。あなたが 1 つの行しか使用していないことは理解しています。行を追加しないという約束を守れることを願っていますが、その約束を破った場合、以下の理由のいくつかは、レンダリング速度やスクリーンリーダーの問題。それがまさに、彼らが標準的なものとそうでないものを呼ぶ理由です。規格はあらゆる状況を考慮に入れています。

レンダリング速度の問題:

テーブルの最大の欠点の 1 つは、ブラウザによるレンダリング方法です。テーブルの位置とサイズを正確に決定する前に、テーブルの内側をロードする必要があります。テーブルに多くの情報が含まれる場合、これは問題を引き起こす可能性があります。

妥当性と基準:

非表形式のデータにテーブルを使用するということは、無効な X/HTML を記述していることを意味します。一部の人にとっては問題ないかもしれません。しかし、私はお勧めしません。こちらをご覧ください

SEO:

テーブルの使用に関する他のあまり聞かれない問題を検索する前は、これを知りませんでした。

検索エンジンは有効なコードを好むため、テーブルを使用しないことで検索エンジン最適化 (SEO) に役立ちます。

これについての詳細はこちらをご覧ください

スクリーンリーダーと点字ディスプレイの問題:

表は、スクリーンリーダーでは簡単に使用できません。この記事をチェックしてください。

レイアウトに表を使用する必要がある場合は、スクリーンリーダーと点字ディスプレイが表を列全体で行ごとに読み上げることに注意してください。TAB オーダーもこのようにテーブルを通過します。そのため、左から右に行ごとに読み取るときに、テーブル構造が適切であることを確認してください。

+ 側:

正直なところ、1 行 1 列の 1 つのテーブルだけを使用し、内部に非常に少量のデータ (これを制限と呼びます) を使用する場合、ページは Javascript を使用する場合よりも高速にレンダリングされることを認めたくありませんが、他の問題は残ります。

score 2 · Accepted Answer

テーブルは、レイアウト目的ではなく、表形式のデータにのみ使用することを意図しています。

問題にテーブルを使用すると、迅速かつ簡単な解決策が得られますが、それが最善の方法または正しい方法であるとは限りません。

何かがもう少し考えて努力する必要があるからといって、それを避けるべきだという意味ではありません.

これについては危険を承知で表を使用してください - あなたの不滅の魂は、今日のあなたの行動に対して、将来、大きな精神的犠牲を払うかもしれません:p

score 1 · Accepted Answer

テーブル内に小さなデータがあるまでは、それほど問題はありません。テーブルはブラウザーにとってやや重く、より多くのデータが入ってくるため、Web ページの応答が相対的に遅くなります。

あなたが示した例は単なる例ですが、実際にはその中にデータがあります。大きくなる場合は、別の方法を選択してみてください。または、最新のすべてのブラウザーで間もなくサポートされる予定ですflexbox model。box modelここで例を見てください。 http://www.kirupa.com/html5/centering_vertically_horizontally.htm

内部のデータが小さい場合は、自由にメソッドを使用してください。

score 1 · Accepted Answer

私はあなたが達成しようとしていることに依存します。1 つのものが中心にある 1 ページだけであれば、それで問題ありません。

しかし、テーブルの位置が固定されているようです。つまり、あなたと一緒にスクロールして、下のコンテンツの上に移動します. もう 1 つのことは、そのテーブルが実際にいっぱいになると、位置が固定に設定されているため、そのテーブルの一番下にあるものを見ることができないということです。

小さなテキスト、画像、または情報を中央に配置するのに最適なソリューションです。

しかし、他の多くのコンテンツやテーブル内の多くのコンテンツを含むページ内で使用するのは悪いことです.

補足: JavaScript を使用してそのような単純なことを達成するのはばかげています。CSSのみを使用してJavaScriptなしで実行できます。javascript を使用して何かをセンタリングし、javascript を使用しないクライアントがアクセスした場合はどうなりますか? すべての単純なことに javascript/jquery を使用して Web を破壊しないようにしましょう ;)

score 0 · Accepted Answer

http://phrogz.net/css/WhyTablesAreBadForLayout.html

基本的に、読み込み時間が少し長く (JavaScript の方が遅い)、スクリーンリーダーには不向き ( JAWSのようなものでテストしてください)、再設計するのが難しい (テーブルをそこに置いた理由を忘れてしまった場合にのみ本当に難しいので、作成してください)。必ずコメントを残してください:)。本当にいいのは ( W3C のあなたに話しているのです! ) のようなものbox-align: x y;です。align: center center次に、またはのようなこともできますalign: center bottom;。

html - 画面の中央に div ポップアップを配置する

8 に答える 8

レンダリング速度の問題:

妥当性と基準:

SEO:

スクリーン リーダーと点字ディスプレイの問題:

+ 側:

Related

Reference

スクリーンリーダーと点字ディスプレイの問題: