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

Question

我有一个不同国家的国旗列表，在它们下面我希望有这个国家的名字。当然列出标志是没有问题的，但我的问题是在国家名称的正上方对齐正确的图标。解决这个问题的最佳方法是什么，它会是 CSS 和表格的混合体吗？

这个想法是：

---

标志图标

阿尔巴尼亚

---

浏览器调整大小也是一个问题，因为我希望它们保持原样，这样它就不会在不同的屏幕尺寸/分辨率下搞砸

谢谢！

Answer 1

我建议将每个带有国家名称的国旗放在单独的浮动 div 中。

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

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

Answer 2

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

这是演示：http: //jsfiddle.net/zXBfL

HTML：

<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>

CSS：

.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;
}