HTML：圖片在同一行上面的文字

請參閱在DEMO的例子稍微出現，它下面的HTML代碼HTML：圖片在同一行上面的文字

helllo hello test test <img src="http://bestsites.me/img/bs.png">

你可以看到，像上面要稍微text.How我可以使圖像來一點點下降。

來源

2013-01-20 Vishnu Simbu

使用CSS margin屬性出現的圖像，讓您期望的結果。具有負值或正值..例如：保證金：2px – TNK

我不知道這是實現這一目標的最佳方式，但你可以使用：

helllo hello test test <img src="http://bestsites.me/img/bs.png" style="margin-bottom: -7px;">

或者你可以編輯你的一些照片編輯軟件（gimp，vs）中的圖片。

來源

2013-01-20 14:08:32

我已經使用了許多圖像，所有圖像看起來像這樣，你可以突出整個段落看到圖像的像素 –

並感謝它運作良好:) –

不客氣。如果有幫助，你能否將標記答案標記爲正確？ –

HTML：

<p>hello hello test test<img src="image.png"/></p>

CSS：

p,img{ 
    padding:0px; 
    margin:0px; 
}

上面應該確保p和圖像元素是內聯與對方。

另一種方法：

HTML

<p>Hello Hello test test</p><img src='image.png'/>

CSS

p,img{ 
    padding:0px; 
    margin:0px; 
    display:inline-block;//not for ie 5.5-7? 
    width:49%; 
    vertical-align:top; 
    text-align:top; 
    border:1px solid #FF0000;//to check the positioning of the elements 
    //these should now be completely level BUT this might not make the text 100% level 
}

來源

2013-01-20 14:02:47 sourRaspberri

但仍然圖像略高於文本..請檢查我的演示鏈接，我已更新代碼 –

@VishnuSimbu檢查編輯。我添加了另一種方法，可能會更好一些。但正如我在評論：可能不會使文本100％的水平 – sourRaspberri

可以使用
<img align='middle'>

對齊中間會爲你

用文字應努力對齊圖像工作。 <img src='src' align='middle'> 會讓你像在中間

來源

2013-01-20 14:18:57 Learner

HTML：圖片在同一行上面的文字

回答

相關問題