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％的高度，如示例中所示？我尝试了位置：相对+顶部：-50％但它没有做任何好事。我提出的“解决方案”要求我放置两个图像，一个不可见以强制div的大小，另一个可以使用top：-50％。我尝试过vertical-align：middle但是没有帮助。

Answer 1

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

Answer 2

垂直对齐非常难以像这样开始工作。我要么将它放入一个易于操作的表格单元格中。或者使用jquery动态获取图像大小并正确定位。

Answer 3

<强> 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 4

尝试使用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>

这是一个代码为http://jsbin.com/apuyiq/2/edit

的jsbin

如何垂直居中img未知高度

4 个答案: