如何将文本和图像放在同一行？

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

Answer 2

的图像是背景图像，你需要设置其在background CSS属性的位置。所以，而不是top，你可以设置center。

.date { 
    background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left center no-repeat; 
} 
.nick { 
    background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left center no-repeat; 
} 

如果上述不起作用，您可以设置图像的像素为多少。所以，如果你想要的图像是8像素下可以设置

.date { 
    background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left 8px no-repeat; 
} 
.nick { 
    background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left 8px no-repeat; 
} 

Answer 3

有一个属性，名为background-position，决定后台位置。它需要两个值，一个用于水平，一个用于垂直位置。这两个值可能需要center。

当您编写以下代码行时，可以使用简写形式background来设置background-position。您明确要求对齐背景是左上角。

background: <background-image> <background-position> <background-repeat>; 
background: url() top left no-repeat; 

你应该写这样的代码垂直居中的背景图片：

background: url() center left no-repeat; 

可以与this jsfiddle这个属性发挥。

干杯， 托马斯。