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

【问题标题】：Vertically align image with single line of text将图像与单行文本垂直对齐
【发布时间】：2013-01-28 15:27:01
【问题描述】：

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

这个想法是：

标志图标

阿尔巴尼亚

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

谢谢！

【问题讨论】：

你尝试过什么，遇到过什么问题？你的问题不够具体。
到目前为止，我唯一尝试过的是一排图标，然后尝试将国家/地区名称均匀地放在它们下方，因为它们没有链接，尽管在调整浏览器大小时它们不会保持在一起。我敢肯定它可以用表格来完成，只是不确定如何
有一百万种方法可以用文本来布置图像，但我建议看一下 figure 和 figcaption 标签。
您可以将它们放在一个跨度中：<li><span class="flag brazil"></span><li> 或者您可以使用 li:before 并将它们设置为背景图像
我确实尝试过使用带有 span 的
标签，但无法继续，你知道我在哪里可以看到一个工作示例吗？

【解决方案1】：

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

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

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

【讨论】：

我确实想到了这一点，但是我有大量的标志要做，我相信用这么大的数量来管理会变得非常困难
这样的做法是正确的。您需要使用脚本或其他东西来为您管理音量。
如果您有大量国家/地区，将它们存储在 php 数组中会很有用。然后你需要做的就是运行一个循环来显示它们。
有什么方法可以让我看到它的演示吗？很抱歉让我很痛苦，我仍然对如何使用 div 感到困惑
任何类型的块容器都可以。如果您使用的是 html5，则可以是 div、li，甚至是链接。

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