Html 使用文本正确定位图像 我试着让图片显示在文本的右边，同时位于垂直轴的中间，以适应导航栏。

目前，我只能让它以内联方式显示，但它总是在栏的底部而不是顶部

HTML:

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

它看起来像什么：

---

下次尝试上传小提琴，我认为这应该可以解决问题：

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

---

将文本放入span或其他位置，以便在其和

上都放置

显示：内联块。这样，您就不需要
浮点：left
。然后应用
垂直对齐：中间

因此：

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;
}


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

默认情况下，
img
（图像的底边将与其旁边文本行的底部对齐）<代码>垂直对齐
更改
img
应该对齐的位置（在本例中，您希望中间对齐）。
您不能只在图片底部添加一个小边距来更改它吗？（这只是一个猜测，因为很难看出问题在哪里，JSFIDLE很方便）
<div id='profileBar'>
 <img src='karl.png' width='25' id='profileBarPic'/>
 <span>Damen</span>
</div>

#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;
}

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

#profileBarPic {
    vertical-align: middle;
}