如何將文本和圖像放在同一行？

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這個屬性發揮。

乾杯， 托馬斯。