在图像旁边垂直对齐文本

Question

如何将我的文字块与图像垂直居中对齐，以使文字显示在中间，但在侧面？

我的JSFiddle 。

<div class="avatar">
    <img src="http://placehold.it/50x50">
    <div>
        <span>MyAvatar.jpg</span>
        Avatars should be no bigger than 200x200px
    </div>
</div>

感谢您的任何帮助

Answer 1

尝试这个

body {font-size:12px}

.avatar {
    display:table;

}
.avatar div
{
    display:table-cell;
    vertical-align: middle
    }

.avatar span {
    display:block;
    font-weight:bold;
}

.avatar img {

    margin-right:20px;
    display:table-cell;

}

http://jsfiddle.net/da08ayLd/2/

Answer 2

使用display: table和vertical-align 。

.avatar {
    display: table;
}

.avatar div {
    display: table-cell; 
    vertical-align: middle;
}

http://jsfiddle.net/da08ayLd/1/