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

小提琴

一点解释。img基本上是一个内联元素，所以添加floatanddisplay: inline是不必要的。

默认情况下img 与其容器的基线对齐（图像的底部边缘将与其旁边的文本行的底部对齐）。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

所以：

HTML：

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

CSS：

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