一個DIV標籤內的圖像的垂直對齊

Question

我一直與div標籤了一段時間，現在玩了，我試圖做的圓角div標籤

<div id="y" style="border: 3px solid #000000;background: #b4ef05; 
border-radius: 25px;width: 300px; height:200px;"> 

<div id="ds"style="width:100%; height:80%;border-top-left-radius: 2em;border-top-right-radius:2em; background: #b4ef05;"><span> 
<img style="display: block; margin:auto;border: 0 none; position: absolute;left:40px;top:30px;" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg"> 
</span></div> 
<div id="dscs"style="border-bottom-left-radius: 1em;border-bottom-right-radius:1em;width:100%;height:20%;background: #000000;color:#ffffff;"><span style="padding:35px;">sssd</span></div> 

</div> 

，但我不能正確設置圖像對齊，此vertical-align:middle;不起作用。 我需要圖像進入div的中間，自動決定左邊和上邊。這種方法正確地把div元素分成兩個來存儲兩個不同的值？

Answer 1

這不是很好的使用內聯風格html元素:)

HTML

<img class="imgLackey" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">

CSS

.imgLackey{ 
    display: table-cell; 
    border: 0 none; 
    margin: 0 auto; 
} 

#imgCont{ 
    display: table-cell; 
    vertical-align: middle; 
} 

#ds{ 
    display:table; 
} 

fiddle

Answer 2

將父母（#y）顯示爲表格（display: table），然後將圖像周圍的跨度設置爲表格單元格（display: table-cell）。

這將允許您在保持代碼語義的同時使用定位能力。

看到這個更新codepen：

http://codepen.io/JRKyte/pen/ptaeI

Answer 3

到該圖像（ID-「DS」）添加的父格「的位置是：相對」

Answer 4

嘗試增加display:table到包含圖像的股利。