17

動的 (高さが変化する) コンテンツ領域を (画面サイズに関係なく) ユーザー画面の垂直方向の中央に配置できるようにするにはどうすればよい100pxですか?

これが図です： ここに画像の説明を入力

この問題の解決に CSS のみを使用するか、JavaScript のみを使用するかは完全にはわかりません。そのため、すべての提案を歓迎します。

4

8 に答える 8

1

テーブルのない JavaScript ベースのソリューション (多様性を追加するため)

HTML

<div id="container">
    <div id="topbar">You can't touch me</div>
    <div id="content">Aliquam erat volutpat...</div>
</div>

CSS

div#topbar {
    border: 2px dashed red;
    height: 50px;
    text-align: center;
}
div#content {
    background: #90c0ff;
    width: 260px;
    margin: 0px auto;
    position: relative;
}

Javascript

var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) {
    topMargin = 0;
}
content.style.top = topMargin + 'px';

http://jsfiddle.net/SD7SA/

于 2013-11-15T07:57:36.577 に答える
0

JS なしでも可能ですが、それは確かに難しく、古い (<9) IE バージョンと互換性のない大量の CSS コードを使用する必要があります。

コンセプトは次のとおりです。

  1. 外側のdivを水平方向と垂直方向の中央に配置します（体の高さが固定されていない場合は難しいです）
  2. 彼に最大身長を与える: 100%
  3. この div で、上部に垂直に配置された内部 div を作成します。

必要に応じて、jsfiddle でこれを行うことができます。

于 2013-11-14T10:35:08.303 に答える
-4

を使用してhtml5宣言を有効にしたことを確認してください<!DOCTYPE html>

その後、<center style="width:100%;"></center>タグを使用して要素を一元化します。

上記のタグ内の要素はすべて一元化され、レスポンシブになります。

于 2013-11-14T10:43:22.613 に答える