将文本与图像内联的简便方法

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

如果您希望文本与每个图像垂直居中，请在图像上将vertical-align属性设置为middle：

img {
    vertical-align:middle;
}

<强> jsFiddle example