html - 如何在短段落中将图像和文本居中？

Question

我有以下内容:

<p style="height: 25px; line-height: 25px;">
   <img width="16" height="16" src="/Content/images/icons/fugue/book-open.png" style="margin-top: 3px;">Test - 5</p>

我尝试了一些与行高有关的东西，但它似乎不起作用。文本总是只有几个词。

如何让图片的中心与文字的中心对齐？

所以我想要的是下面 xs 代表图像的地方:

xxx
xxx text
xxx

Answer 1

你还没有说你是想水平排列元素还是垂直排列元素，所以我将对两者进行解释:

垂直对齐:
由于默认情况下图像是内联 block ，因此可以使用 text-align 轻松定位它们.只需在它们之间添加一个 like-break ( <br/> ) 或添加一个 display: block .为图像设计样式并使用text-align: center在你的段落上。

see it working on jsfiddle .

用于水平对齐:
最简单的解决方案是使用 position: relative 和 top:2px将图标向下移动。

see it working on jsfiddle