Avatar Customization on Member View ((how to center))

JacquiiDesigns

Well-known member
Okay - I'm modifying my member_view template as you can see at http://xen.jpicforum.info/members/msjacquiic.1/ --- I'm having a code issue with centering the avatar both horizontally as well as vertically in the space allotted:

di-80ZK.png


Any css enthusiasts out there who can advise how to make the code like:

di-QKQC.png


I'd appreciate you assistance! Thanks ;)

J.
 
Thanks for responding Arny - and I did use search btw and didn't see that thread :p
I tried adding the declaration = didnt' work :(

Here's the current code I use:
HTML:
        <div class="avatarScaler">
<div class="memberpage-avatar">
            <xen:if is="{$visitor.user_id} == {$user.user_id}">
                <a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
                    <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                </a>
            <xen:else />
                <span class="Av{$user.user_id}l">
                    <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                </span>
            </xen:if>
        </div>
</div>

...

Now after an hour and a half of googling, trying different techniques, I say F**K it and wrapped it in a table LOL


HTML:
        <div class="avatarScaler">
<table class="memberpage-avatar">
<tr><td style="vertical-align:middle;">
            <xen:if is="{$visitor.user_id} == {$user.user_id}">
                <a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
                    <img class="avatarScaler" src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                </a>
            <xen:else />
                <span class="Av{$user.user_id}l">
                    <img class="avatarScaler" src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                </span>
            </xen:if>
        </td></tr>
        </table>
</div>

It's not ideal - but it works.
Anyway - thanks again for responding. Anyone else have suggestions?

Thanks,

J.
 
not sure you want to go around doing it this way but you could force a max-width at 96px and center it with padding (hacky stuff).

Code:
.mast .avatarScaler img {
max-width: 96px;
padding: 25%;
}
 
Top Bottom