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

我有下面的关键，这是一个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/>

---

我不太清楚，但这里有两种可能的解决方案。如果希望所有内容都在一行上，请删除标记

如果希望文本与每个图像垂直居中，请将图像上的“垂直对齐”属性设置为“中间”：

img {
    vertical-align:middle;
}

---

img{display:inline block；}把你的css放在这里，用于key和.img key。break标签将每个图标及其对应的标签放在它们自己的行上