垂直居中對齊圖像與絕對位置

<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

垂直居中對齊圖像與絕對位置

回答

相關問題