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

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

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

谢谢

来源

2013-02-16 Rohit

请通过这些小提琴链接.... – Rohit 2013-02-16 09:30:38

看到我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 ..所以我把这个。

来源

2013-02-16 11:21:35 abbood

当图像没有固定大小时很难。的替代解决方案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。

来源

2013-02-16 11:40:45 megatxi

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

回答

相关问题