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

[JacquiiDesigns]

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:

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

I'd appreciate you assistance! Thanks

J.

 

[ArnyVee]

Here you go Jacquii: http://xenforo.com/community/threads/center-avatar.34311/

 

[JacquiiDesigns]

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

Here's the current code I use:

        <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

        <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.

 

[Shelley]

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).

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