爲什麼圖像與文本不在同一行？

Question

http://xanlz.com/template 

圖片（小徽標）比文本更接近瀏覽器的上邊框。但文字不是爲什麼？

Answer 1

您的圖片需要與文字垂直對齊。這裏的CSS：

.f1 img { 
    vertical-align: text-bottom; 
} 

原因是瀏覽器如何解釋「行高」，以及它如何定位內聯元素以及該垂直空間內的文本。

Answer 2

由於文本可能包含較大的大寫字母，並且字體有邊距以保持圖像不能共享的可讀性。

Answer 3

要解決，你可以添加位置：相對於img元素的2px的頂值：

.f1 img { 
    position: relative; 
    top: 2px; 
} 

或者，如果你想在它坐在什麼地方細粒度控制頂部的任何值。

Answer 4

這裏是我如何放置在同一行的幾個圖像和文字：

<div style="display:inline;float:left"> some word </div> 
<img style="display:inline;float:left".../> 
<div style="display:inline;float:left"> word 2></div> 
..... 

內嵌樣式只佔用盡可能多的寬度，因爲它需要，並沒有考慮新的生產線。