Center avatar & add break

[AzH]

Hi,

This is my postbit_legacy avatar snippet.

I have been trying to align avatar centrally in the userinfo column but without success, and to also put a line break beneath it. ANy suggestions on what I need to add?

<vb:if condition="$show['avatar']">
<div class="usercenter">
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
</a>
</div>
</vb:if>


Here is example page: http://www.xgengamers.com/threads/5002-What-would-you-like-to-see-on-XGen

TYVVVM:up:

[Lynne]

You have this:
.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar { clear: both; display: block; float: left; margin: 3.33333px auto 0; text-align: left; width: auto;}
You need to add some css to text-align: center and float:none. Also, add some padding-bottom to your .usercenter class.

[AzH]

Thanks Lynne for helping. I have opened the additional.css template, but now I am struggling to work out where to add some float.

I really am a novice when it comes to css, so a slightly more indepth answer would be greatly appreciated.

[Lynne]

Just put:
.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {float: none; text-align: center;}

[AzH]

Thanks very much. That did exactly what I wanted.

Appreciate the help.