div内部的垂直中心

Question

在我的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;}

小提琴，结构大致相同： http://jsfiddle.net/6jnte8da/1/

我想垂直对齐span元素，包括＆＃34; level x＆＃34; ＆安培; ＆＃34;赢/输X＆＃34;，关于图像。

提前 - 谢谢

Answer 1

从HTML中删除所有样式标记

<div id="rcontainer">
    <div id="accinfo">
        <img src="images/default-avatar.png" id="accavatar" />
        <span id="inneraccinfo">
            Level X <br />
            Win/loss X
        </span>
    </div>
</div>

为css尝试类似的东西

#rcontainer {
    height: 50px;
}
#accavatar {
    width:50px;
}
#accinfo {
    height: 50px;
    display: inline-block;
    width: 200px;
}
#accinfo img {
    vertical-align: top;
}
#inneraccinfo {
    font-family:my_fat_font;
    color: white;
    display:inline-block;
}

Answer 2

只需将display:table-cell与display:table一起用于父级。在这里小提琴：http://jsfiddle.net/6jnte8da/2/