CODEWITHSUNDEEP
htmlcssalignment
Ben Green
Ben Green

Reputation: 51

Vertically align image with single line of text

I have a list of different country flags, and below them I wish to have the name of the country. Of course listing the flags is no problem but my issue is aligning the correct icon directly above the name of the country. What is the best method of going about this, would it be a mixture of CSS and tables?

The idea would be:

FLAG ICON

Albania

Browser resizing is also an issue as I'd like them to stay put so that it doesn't screw up at different screen sizes/resolutions

Thanks!

Upvotes: 0

Views: 225

Answers (2)

Webapper
Webapper

Reputation: 305

I would recommend using flag as a background for element. It's nice and clean:

Here's demo: 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;
}

Upvotes: 0

Jean-Georges
Jean-Georges

Reputation: 688

I would suggest putting each flag with it's country name in separate floated divs.

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

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

Upvotes: 1

Related Questions