html - 如何将文字和图片放在同一行？

Question

如何将文本和图像放在同一行，例如以图像为中心？ 我尝试了一些方法，比如 vertical-align:middle;显示:内联；但不工作......我的错误在哪里？

现在:

我的 CSS 代码:

<style>
    .entryDetailX {
        float: right;
        background: #2B587A;
        -moz-border-radius-topleft: 8px;
        -webkit-border-top-left-radius: 8px;
        -moz-border-radius-bottomright: 8px;
        -webkit-border-bottom-right-radius: 8px;
        font-weight: bold;
        color: #FFF;
        padding: 6px;
    }
    .date {
        float: right;
        font-size: 9px;
        padding-top: 1px;
        background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
        padding-left: 20px;
        margin-right: 10px;
    }
    .nick {
        float: right;
        margin-right: 20px;
        color: #cc9900;
        background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
        padding-left: 20px;
    }
</style>

HTML:

<div class="entryDetailX">
    <span class="date">18.01.2011 00:50:55</span>
    <a class="nick">phantasm</a>
</div>

谢谢

Answer 1

你只需要添加

 background-position:left center;

Check on Fiddle