Concern:
I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consistent margin being applied. This causes the flags to align differently depending on the number next to them.
Query: What is the best approach to ensure they are aligned in a straight line? (The maximum length of the number will be three digits.)
P.S: While having three flags on one line would work, I prefer them all to be perfectly aligned vertically.
Provided Code: (Full code available in this fiddle)
CSS:
#visitor ul {
font-size: 20px;
list-style-type: none;
margin-top: 20px;
}
#visitor ul li {
display:inline;
}
#visitor ul li img {
vertical-align: middle;
margin: 25px;
}
HTML:
<section id="visitor">
<ul>
<li>
<img src="http://i58.tinypic.com/28u467o.png" width="48" height="48" alt="US" />5</li>
<li>
<li>
<img src="http://i58.tinypic.com/28u467o.png" width="48" height="48" alt="US" />55</li>
<li>
</ul>
</section>
Your input and assistance are greatly appreciated!