0

私の問題を示すためにjsFiddleを作成しました：

http://jsfiddle.net/MXt8d/1/

.outer {
  display: inline-block;
  vertical-align: top;
  overflow: visible;
  position: relative;
  width: 100%;
  height: 100%;
  background: red;
}

.inner {
  overflow: hidden;
  height: 50%;
  width: 100%;
  margin-top: 25%;
  margin-bottom: 25%;
  background: blue;
  opacity: 0.7;
  color: white;
}

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

問題は、div を別の div 内で水平方向に中央に配置する必要がある場合です。内側の div の高さを % (例: 50%) で指定し、次に margin-top と margin-bottom を残り (例: (100 - 50) / 2 = 25 %) に指定します。

しかし、jsFiddle でわかるように、意図したとおりに機能していません。

親からのマージンの計算は機能しますが、要素スタイルのオブジェクトがノックアウト.jsを介してオブジェクトにバインドされており、jsFiddleに示されているように単純ではないため、divの親にアクセスできないため、私には不可能です.

誰かが私を助けてくれることを願っています:-)

bj99

アップデート：

なぜこれが実際に起こっているのかがわかったので、同様の問題を抱えている人のためにここに投稿します。

http://www.w3.org/TR/CSS2/box.html#propdef-margin-topから:

'margin-top', 'margin-bottom' パーセンテージ:包含ブロックの幅を参照

そして、私が高さに苦労したわけではありません:-/

4

3 に答える 3

1

要素へ#inner：

1）追加position:absolute

2）プロパティを削除margin-topしますmargin-bottom

3）追加top:25%

それでおしまい！

于 2013-01-14T14:04:27.760 に答える
0

問題にはさまざまな解決策があります。

1）内側の要素に追加position:absoluteします-例top:25%

2）display:table外側とdisplay:table-cell内側の要素で使用します。これにより、垂直方向のセンタリングも可能になります。-例

それぞれの解決策にはいくつかの注意点があります。私は個人的に可能な限り絶対的なポジショニングを避けようとしますが、これも個人的な好み次第です。

于 2013-01-14T14:10:56.367 に答える
0

それはあなたの問題の解決策です。私があなたを助けたことを願っています

.inner {
  overflow: hidden;
  height: 50%;
  width: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  position: absolute;
  margin: auto;
  background: blue;
  opacity: 0.7;
  color: white;
}
于 2013-01-14T14:04:28.273 に答える