用文字正确定位图像

我试图使图像正确显示为文本，并且同时位于垂直轴的中间以适应导航栏。用文字正确定位图像

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

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

是什么样子：

What it looks like

来源

2013-08-27 sauron

难道你不能只改变它只增加一个小幅底部的图片？（这只是一个猜测，因为很难看到问题出在哪里，jsfiddle会很方便） –

旁边的文字图像？这就是图像一直工作的方式。你可以少了很多标记预期的影响：

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

和CSS：

#profileBarPic { 
    vertical-align: middle; 
}

Fiddle

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

默认情况下imgaligns with the baseline of its container（图像的下边缘将与它旁边的文本行的底部对齐）。 vertical-align更改img应与自己对齐（在这种情况下，您想要中间）。

来源

2013-08-27 17:55:35 SlightlyCuban

尝试上传旁边添了小提琴E，我想这应该不过解决这个问题：

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

来源

2013-08-27 17:54:24

把你的文字变成跨度或东西，所以，你可以在它和<img>把display:inline-block。这样，你将不需要0。然后申请一个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; 
}

来源

2013-08-27 17:55:32 daleyjem

用文字正确定位图像

回答

相关问题