为什么文本不在div中的图像旁边垂直居中？

Question

我需要在div中移动带有“我的文字左侧”的图片和文字，如下图所示，并将文字垂直居中放在div的图片旁边。

http://jsfiddle.net/gdWM5/22/

这就是我所拥有的：

这就是我想要的东西：）

Answer 1

使用边距...（在<div>元素上）

.mLogoTextClass { 
    position:absolute;
    text-align: center;
    vertical-align: middle;
    right:0px;
    top:0px;
    margin: 10px 10px 0px 0px; /* Here you go */
}

...和align="absmiddle"（在<img>上）

<img align="absmiddle" src="http://www.shark-helmets.com/images/bases/youtube-logo.jpg" />

JSFiddle： http://jsfiddle.net/digitalextremist/gdWM5/29/

Answer 2

您无法垂直对齐块元素。您已将其用作 table-cell

.mFirstClass {
    width:100%; 
    height: 20%;
    float:left;
    position:relative;
    display: inline-table;  // changed here
}

.mLogoTextClass { 
    position:relative; //change position to relative
    text-align: center;
    vertical-align: middle;
    right:0;
    display: table-cell; //added it
    top:0;
}

JSFiddle