Question

我正在尝试创造一些东西

<div class="model-info">
<div class="mainholder">
  <div class="divImage centeredImageContainer" align="center"> 
  <a href="talent_view.aspx?uid=e7385d69-8659-4ab4-a55d-d693ca9ba816">
        <img  class='centeredImage' style='width:80px;' src="http://t0.gstatic.com/images?    q=tbn:ANd9GcRX9N8qSDD4OhL9XH0N8RTbf3bObBR5TrqKeyUFxi-ZpAKQxyVsrw" alt="Anne" title="Anne">
   </a>
 </div>

css如下：

.centeredImageContainer
{
  position:relative;
 }
 .centeredImage
{position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;}

但是当我尝试使用绝对位置垂直居中图像时，它会干扰所有设计，

like this

图像是动态的，没有固定大小。

此外，当我在px中更改.divimage高度时，它会接受，但在％时，它会变为0px高度。

如何将此图像垂直居中设置。或者我错过了什么？

谢谢

Answer 1

图像没有固定尺寸时很困难。 abbood的另一种解决方案是将图像设置为div的背景图像并将背景位置设置为center center：

<div style="height: 600px">         
    <a href="#">
            <div style="text-align:center; height:100%; border-style:solid;  background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcRX9N8qSDD4OhL9XH0N8RTbf3bObBR5TrqKeyUFxi-ZpAKQxyVsrw) no-repeat center center;">
            </div>
    </a>
</div>

缺点是您无法更改图像大小，除非您使用CSS3属性background-size。

Answer 2

查看我的jsfiddle

基本上我使用了这个技巧：

 <div class="outer"> 
  <div class="middle">
    <div class="inner">
      <!-- content to be vertically centered-->
    </div>
  </div>
 </div>

和css：

.outer {
    display: table;
    position: static;
    height: 9.22em; /* the height you want to center according to */

}
.middle {
    display: table-cell;
    vertical-align: middle;
    position: static;
}
.inner {
    margin-left: auto;
    margin-right: auto;
}

注释：

应该避免使用绝对定位.. b / c它将文件流中的元素取出..这会导致意外的结果，如你的情况
在我的解决方案中，你必须知道你要根据的高度..所以在我的情况下..我认为右表的高度约为9.22em ..所以我把它。

垂直居中对齐图像与绝对位置

2 个答案: