html - 画像を1行のテキストに垂直に揃える

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