Html 将图像与单行文本垂直对齐

我有一份不同国家国旗的清单，下面是我想知道的国家名称。当然，列出国旗没有问题，但我的问题是将正确的图标直接对准国家名称上方。这方面最好的方法是什么，是CSS和表的混合吗

其想法是：

---

旗帜图标

阿尔巴尼亚

---

浏览器大小调整也是一个问题，因为我希望它们保持不变，以便在不同的屏幕大小/分辨率下不会出错

---

谢谢

我建议将每面国旗及其国名放在单独的浮动分区中

<div>
<img src="flag.jpg"/>
UK
</div>

<div>
<img src="flag.jpg"/>
USA
</div>

英国
美国

我建议使用标志作为元素的背景。它既漂亮又干净：

下面是演示：

HTML:

---

你尝试过什么，遇到过什么问题？你的问题不够具体。到目前为止，我唯一尝试过的是一排图标，然后尝试在它们下面均匀地隔开国家名称，因为它们没有链接，但在调整浏览器大小时它们不会保持在一起。我相信这可以用表格来完成，只是不确定有多少种方法可以用文本来布置图像，但我建议看一下图和figcaption标记。你可以将它们放在span:

中，或者你可以使用
li:before
并将它们设置为背景图像。我尝试过用span标记
，但无法获得你知道我在哪里可以看到一个有效的例子吗？我确实想到了这一点，但是我有大量的标志要做，我相信用这么多的标志来管理会变得非常困难。像这样的方法是正确的。您需要使用脚本或其他工具来管理卷。如果您有大量的国家/地区，则可以将它们存储在php数组中。然后你需要做的就是运行一个循环来显示它们。有没有办法让我看到它的演示？很抱歉，这让我很痛苦，我只是还不知道如何使用div来实现它，任何类型的块容器都可以。可以是一个div，li，甚至是一个链接，如果你在html5中工作的话。
<div class="countryList">
    <div class="country" style="background-image: url(http://www.virtualglobaltaskforce.com/wp-content/themes/VGT/images/flag_uk.gif)">United Kingdom</div>
    <div class="country" style="background-image: url(http://www.virtualglobaltaskforce.com/wp-content/themes/VGT/images/flag_uk.gif)">Portugal</div>
</div>

.countryList .country {
    display: inline-block;
    padding: 80px 10px 10px 10px;
    border: 1px solid #666;
    margin-right: 5px;
    background-position: center 20px;
    background-repeat:no-repeat;
    width: 120px;
    text-align:center;
}