Question

请参阅DEMO上的示例，其中包含以下HTML代码

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

你可以看到图像略高于文字。如何让图像稍微降低。

Answer 1

HTML：

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

CSS：

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

以上内容应确保p和image元素相互内联。

另一种方法：

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
}

Answer 2

我不确定这是达到此目的的最佳方法，但您可以使用：

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

或者您可以在某些照片编辑软件（gimp，vs）中编辑照片。

Answer 3

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

对齐中间对你有用

将图像与文本对齐应该有效。的 <img src='src' align='middle'> 会让你的图像出现在中间

HTML：同一行中的图像略高于文本

3 个答案: