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/

我想相對於圖像垂直對齊包含“ level x”和“ win / loss X”的span元素。

提前-謝謝

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/