Question

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

这个想法将是：

标志图标

阿尔巴尼亚

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

谢谢！

Answer 1

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

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

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

Answer 2

我建议使用flag作为元素的背景。它干净整洁：

这是演示：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;
}

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

2 个答案: