Html 垂直中心内分区

在div内垂直居中跨距时出现问题

HTML:

小提琴，结构大致相同：

我想将包含级别x和赢/亏x的跨度元素与图像垂直对齐

---

提前-谢谢

从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>

---

只需将display:table单元格与display:table结合使用即可。此处使用提琴：

如果您希望他人帮助您，请创建一个提琴。这不会使跨度与图像垂直对齐。对不起，我应该指出，我希望使跨度垂直居中。

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

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

#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;
}