XF 1.5 Issue with custom field => alignment

[Betclever]

Hello all,

I made some custom field but I have an issue with alignment.
I added this inside the template "message_user_info" and just before this => <xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">:

<xen:if is="{$user.customFields.NBA}">
    <div align="center" class="NBA"><img class= "NBA" src="/NBA/{$user.customFields.NBA}.png" /></div>
</xen:if>
                <xen:if is="{$user.customFields.NHL}">
    <div align="center" class="NHL"><img class= "NHL" src="/NHL/{$user.customFields.NHL}.png" /></div>
</xen:if>

However, this is the result (don't want them in vertical but horizontal):

This is what I want but centered:

To manage what you will see on the second capture, I have added this code under extra.css :

float: left;
margin-left: 5px;
margin-right: 5px;

However, even with this CSS code, the result is not optimal cause the icon goes to the left even if it's precised inside the DIV that I want to center them.
Of course, if I remove the float:left, the logo of the team will be centered but vertically like on the first capture.

Can someone tell me what's wrong?
I presume, I have to modify the HTML code so the piece of code I added above?

Thanks for your help cause I'm blocked and tried a lot of things without success...