css - 未知の高さの画像を垂直方向に中央揃えする方法

Question

私が達成したい結果を示す図から始めましょう: http://jsfiddle.net/2DvF6/1/

<div id="controler">
  <img id="i1" src="arrow1.png">
  <img id="i2" src="arrow1.png">
</div>

img{
  width:100%;
}
#i1{
  visibility:hidden;
}
#i2{
  position:absolute;
  top:-50%;
  left:0px;
}
#controler{
  position:absolute;
  width:100px;
}

div#controler の幅のみを制御していて、画像のサイズがわからない (そして知りたくない) とします。高さが指定されていない場合は、縦横比を使用して計算する img タグの優れた機能を使用します。では、例のように、画像を高さの -50% 上に移動するにはどうすればよいでしょうか? position:relative + top:-50% を試しましたが、何もうまくいきませんでした。私が提示した「解決策」では、2 つの画像を配置する必要があります。vertical-align:middle を試しましたが、役に立ちませんでした。

Answer 1

を使用する代わりに、 をposition: absolute;使用しますvertical-align: middle;。

Answer 2

Vertical alignment is VERY difficult to get to work like that. I would either put it into a table cell which handles easily and well. Or use jquery to dynamically get the image size and properly position it.

Answer 3

http://shipp.co/midway/を使ってみてください これは、あらゆるコンテンツを縦横に中央寄せする JS ライブラリです。

HTML:

<div id="controller" class="centerHorizontal centerVertical">
 <img src="http://www.placehold.it/450x250" alt="Placeholder image">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="midway.min.js" type="text/javascript"></script>

ここにコードを含むjsbinがあります：http://jsbin.com/apuyiq/2/edit

Answer 4

CSS

  img{
      width:100%;
    }
    #i1{
      visibility:hidden;
        position: absolute;
    }
    #i2{

    }
#controler{
    position: absolute;
    width: 100px;
    top: 50px;
    left: 50px;
    border: 1px solid red;
}

html

<div id="controler">      
    <img id="i1" src="http://vanisoft.pl/~lopuszanski/oblep/img/arrows/1_big.png">
    <img id="i2" src="http://vanisoft.pl/~lopuszanski/oblep/img/arrows/1_big.png">
</div>​