使用文本正确定位图像

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应与其对齐的位置（在这种情况下，您想要中间位置）。

Answer 2

下次尝试上传一个小提琴，我认为这应该解决它：

#profilebar {
    float: right;
    padding-right: 10px;
    display: table-cell;
    vertical-align: middle;
}

Answer 3

将您的文字放入某个范围内，以便在display:inline-block和<img>上放置float:left。这样，您就不需要vertical-align:middle。然后应用<div id='profileBar'> <img src='karl.png' width='25' id='profileBarPic'/> <span>Damen</span> </div>

这样：

HTML：

#profileBar {
    float: right;
    padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
    width: 25px;
    display: inline-block;
    vertical-align:middle;
    padding-right: 10px;
}

CSS：

{{1}}