html - div 内垂直居中

Question

将我的 span 在我的 div 中垂直居中时出现问题。

HTML:

<div id="rcontainer" style="width:100px;">
    <div id="accinfo" style="height:50px; overflow:hidden;">
        <img src="images/default-avatar.png" id="accavatar" />
        <span id="inneraccinfo">
            Level X <br />
            Win/loss X
        </span>
    </div>
</div>

CSS:

#accavatar {
resize:both;
width:50px;}
#accinfo {
position: relative;
left: 10px;
top: 10px;
display: inline;}
#inneraccinfo {
font-family:my_fat_font;
color: white;}

fiddle ，结构大致相同: http://jsfiddle.net/6jnte8da/1/

我想相对于图像垂直对齐包含“level x”和“win/loss X”的 span 元素。

提前 - 谢谢

Answer 1

只需将 display:table-cell 与 display:table 结合使用即可。
在这里 fiddle :http://jsfiddle.net/6jnte8da/2/