html - 将图像与文本正确定位

Question

我试图使图片显示与其右侧的文本内联，同时定位在垂直轴的中间以适应导航栏。

目前，我只能让它内联显示，但它总是接近栏的底部而不是顶部。

HTML:

<div id='profileBar'>
 <img src='karl.png' width=25 id='profileBarPic'/>
 Damen
</div>

CSS:

#profileBar {
    float: right;
    padding-right: 10px;
}
#profileBarPic {
    width: 25px;
    display: inline;
    float: left;
    padding-right: 10px;
}

它的样子:

Answer 1

图片旁边的文字？这就是图像一直有效的方式。您可以通过更少的标记获得所需的效果:

<div id='profileBar'>
  <img src='http://placekitten.com/50/50' id='profileBarPic'/>
  Damen
</div>

和 CSS:

#profileBarPic {
    vertical-align: middle;
}

Fiddle

一点解释。 img 基本上是一个内联元素，因此添加 float 和 display: inline 不是必需的。

默认img aligns with the baseline of its container (图像的底部边缘将与它旁边的文本行的底部对齐)。 vertical-align 更改 img 应对齐的位置(在本例中，您需要居中)。