html - 将文本与图像内联放置的简单方法

Question

我有以下“键”，它是一个 div，其中包含用于教育动画的行星图片及其名称。有没有一种快速的方法/快捷方式(无需将文本包装在单独的跨度或其他内容中，然后将顶部/底部/左侧/右侧属性分配给特定的 id)使文本与图标显示一致？

<p id='key'>
<img class='img-key' src='media/mercury.ico'> Mercury
    <br/>
<img class='img-key' src='media/venus.ico'> Venus
    <br/>
<img class='img-key' src='media/planet-earth.ico'> Earth
    <br/>

Answer 1

不确定我是否理解，但这里有两种可能的解决方案。如果您希望所有内容都在一行中，请删除 <br />标签。

jsFiddle example

如果您希望文本与每个图像垂直居中，请将图像的垂直对齐属性设置为居中:

img {
    vertical-align:middle;
}

jsFiddle example