0

要素を垂直方向と水平方向に中央揃えしています。1 つの問題を除いて、すべて正常に動作しimgますdiv。画像に適用され、div には適用されない IE のスタイルは?

HTML

<!-- image - works correctly -->
<div class="container">
    <img class="inner" src="http://placekitten.com/200/200?image=2" />
</div>
<br/>
<!-- div - doesn't work (aligned to top) -->
<div class="container">
    <div class="inner">123</div>
</div>

CSS:

.container {
  height: 300px;

    background: #EEE;
    text-align: center;
    line-height:  300px;
}

.inner { vertical-align: middle; width: 100px;
 height: 100px; background:red; display: inline-block; line-height: 1.3; }​

フィドル:

http://jsfiddle.net/kpdxu/7/

また：

  • DIVのサイズがわからない
  • JavaScript を使用できますが、動的コンテンツが含まれているため DIV のサイズを取得できません

ありがとうございました！

4

1 に答える 1

1

これを使用しますcss：

.container {
   height: 300px;
   background: #EEE;
   text-align: center;
   line-height:  300px;
   position:relative; //<--this will hold the absolute positioned elements
}

.inner { 
   vertical-align: middle; 
   width: auto;
   height: auto; 
   background:red; 
   display: block; // <--display block will do for ie 7
}

jquery経由：

$.fn.center = function () {
   this.css("position","absolute");
   this.css("top", ( $('.container').height() - this.height() ) / 2 + "px");
   this.css("left", ( $('.container').width() - this.width() ) / 2 + "px");
   return this;
}

次に、このように使用します

$('.inner').each(function(){
   $(this).center();
});

しかし、親は でなければなりませんposition relative。

フィドルをチェックしてください：http://jsfiddle.net/kpdxu/14/

于 2013-01-01T17:07:49.470 に答える