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元素分成两个来存储2个不同的值？

Answer 1

将父（#y）显示为表格（display: table），然后将图像周围的范围设置为表格单元格（display: table-cell）。

这将允许您使用定位能力，同时保持代码的语义。

请参阅此更新的codepen：

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

Answer 2

在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 3

尝试将display:table添加到包含图片的div。

Answer 4

到此图片的父div（id-＆＃39; ds＆＃39;）添加＆＃34; position：relative＆＃34;