将<img/>与<h1> </h1>中的其余文本很好地定位

Question

我想将<img>标记与<h1>标记中的其他文字很好地对齐。

我不知道如何做到这一点。填充移动文本和图像。

http://jsfiddle.net/vUCr9/这就是我所拥有的，我希望文本能够很好地与图像对齐。

任何人都有任何好的解决方案吗？

Answer 1

指定图片的vertical-align -

h1 {
    font:35px 'Russo One', sans-serif;
}
​h1 img {
    vertical-align: middle;
}​

JS Fiddle demo

参考文献：

• vertical-align。

Answer 2

在position:relative上使用img，然后按left: Xpx; top:Xpx或其他任何方式对其进行定位：

img{
  position: relative;
  top: 6px;
  left: 4px;
}

这是jsFiddle

Answer 3

尝试：

h1 img{
    vertical-align:middle;
}
​

<强> jsFiddle example

Answer 4

<h1>HTML<img style="vertical-align:middle;" 
src="https://si0.twimg.com/profile_images/1730750300/HTML5_Badge_128_normal.png" 
alt="5" /> LOGO</h1>

这是您使用内联样式修复它的方法

jsfiddle.net/JZGAF