Hi,

The flag used in the following code have transparent backgrounds at top & bottom due which the text is not properly aligned with the country flag. Removing transparent background would be an arduous task. Help me through css.

Image is using .simple_img class.

Flag Image (Example) : Image

.coveragetab {
        background: #ffffff;
        border: 1px solid #C8C8C8;
        padding: 0px 10px 3px 10px;
        margin: 0 5px;
        font-size: 12px;
        font-family: Tahoma;
        }
        
.simple_img {
       padding: 0px;
       margin-top: auto;
       margin-right: 4px;
       margin-bottom: auto;
       margin-left: auto;
       display: inline;
       float: left;
       }

<div class="coveragetab" style="margin: 0 5px;">

<h3><img class="simple_img" src="/wp-content/uploads/icons/flags/24/pk.png" title="Team 1" style="width: 18px;height: 18px; float:none;">Team 1 vs <img class="simple_img" src="/wp-content/uploads/icons/flags/24/lk.png" title="Team 2" style="width: 18px;height: 18px; float:none;">Team 2 - 1st Match</h3> 

<b>Venue: </b> Venue here! Venue here
<div style="border-bottom:1px solid #CCCCCC; margin-bottom:3px; padding:0px 0px 10px 0px; clear:both;"></div>
<b>Watch live coverage: <a href="#">TV</a></b>

</div>

OK, a live link would be more helpful, but here goes: You've already constrained the proportions of the images (if they're all the same dimensions you could save yourself a lot of extra typing by putting those constraints in the master stylesheet before the float). You can alter the line-height or vertical-align, or check the margins and padding of the container to see what's throwing things off. Check here if you are unsure how to do these.

tim

vertical-align with negative value worked. Thanx