在div或图像的中间创建文本

Question

我有这个HTML

<div class="vmpLogoClass">
     <span style="margin-top:10px; vertical-align:middle">Powred by:</span>
     <img alt="vmplogo" src="images/inconcert_logo.png" style="float:right;" />
</div>

这是 css：

.vmpLogoClass {
    width:29%;
    float:right;
    text-align:right;
}

这是结果：

我需要文本在中心。我的意思是不在图像的顶部。

我尝试给予保证金最高限额，但似乎边缘顶部不受任何影响。

Answer 1

尝试使用line-height: (the height of the image) px;

在我的情况下，使用相同的徽标应该是：
的的CSS：

span { line-height:104px;}

检查 DEMO

Answer 2

你可以尝试这个

.vmpLogoClass {
float:right;
}
.vmpLogoClass span, .vmpLogoClass img{
    display:inline-block;
    vertical-align: middle;

}

<强> Demo

Answer 3

首先，从类名中删除Class，然后从HMTL标记中删除样式标记。

<div class="vmpLogo">
     <span>Powered by:</span>
     <img alt="vmplogo" src="http://www.crossfone.com.ar/imgs/logo_inconcert.jpg" />
</div>


.vmpLogo {
    text-align: center;
    width:100%;
}

.vmpLogo span {
    display: block;
}

.vmpLogo img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

http://jsfiddle.net/J7wUs/