css - 如何垂直居中未知高度的img

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% 但它没有任何好处。我提出的“解决方案”需要我放两张图片，一张不可见以强制 div 的大小，另一张可以使用 top:-50%。我试过 vertical-align:middle 但没有帮助。

Answer 1

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>​

Answer 2

不使用position: absolute;，使用vertical-align: middle;。

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

垂直对齐很难像那样工作。我要么把它放到一个表格单元格中，这个单元格处理起来很容易而且很好。或者使用jquery动态获取图片大小并正确定位。