如何進行垂直未知HIGHT的中心IMG

讓我從中呈現我想要達到的結果插圖開始：如何進行垂直未知HIGHT的中心IMG

<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％。我試過垂直對齊：中間但它沒有幫助。

來源

2012-11-25 qbolec

所以僅僅是明確的，你想要的圖像的垂直中心與控制器的頂部排隊'格'？ –

@MaxSpencer是 – qbolec

或者更一般地說：一種使用表達式 – qbolec

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

來源

2012-11-25 16:19:21 bookcasey

中的圖像的「當前高度」的方式嘗試了這一點，但它沒有幫助。 – qbolec

垂直對齊很難像這樣工作。我會把它放到一個很容易處理的表格單元格中。或者使用jquery動態獲取圖像大小並正確定位。

來源

2012-11-25 16:54:25

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>

來源

2012-11-26 06:22:00 Nandhakumar

@qbolec [live demo]（http://jsfiddle.net/nandhakumarsri9/B38qY/） – Nandhakumar

也許我沒有說清楚：我需要一個解決方案，其中沒有重複的標記。 – qbolec

嘗試使用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

來源

2013-07-26 19:39:53 mkuk

如何進行垂直未知HIGHT的中心IMG

回答

相關問題