[zonaenlinea]

center the bars and watch the image as is



here I leave my full code

<div align="center">
<div style="width:102px; height:4px;"></div>

<vb:if condition="$vboptions[xperience_bar_colour_level] !== 'Hide'">

<vb:if condition="$vboptions[xperience_postbitstyle]==2">
{vb:raw xperience.gfx_level}
</vb:if>

<div title="{vb:raw xperience.gfx_level}" style="width:102px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_level}_faded.png);" >
<div title="{vb:raw xperience.gfx_level}" style="width:1px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_level}_left.png); display:inline; float:left;"></div>
<div title="{vb:raw xperience.gfx_level}" style="width:1px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_level}_right.png); display:inline; float:right;"></div>
<img alt="{vb:raw xperience.gfx_level}" src="{vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_level}.png" width="{vb:raw xperience.level}" height="11" />
</div>

</vb:if>

<vb:if condition="$vboptions[xperience_bar_colour_levelup] !== 'Hide'">

<vb:if condition="$vboptions[xperience_postbitstyle]==2">
{vb:raw xperience.gfx_levelup}
<div style="width:102px; height:2px;"></div>
</vb:if>

<div title="{vb:raw xperience.gfx_levelup_nb}" style="width:102px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_levelup}_faded.png) ;">
<div title="{vb:raw xperience.gfx_levelup_nb}" style="width:1px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_levelup}_left.png); display:inline; float:left;"></div>
<div title="{vb:raw xperience.gfx_levelup_nb}" style="width:1px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_levelup}_right.png) ; display:inline; float:right;"></div>
<img alt="{vb:raw xperience.gfx_levelup_nb}" src="{vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_levelup}.png" width="{vb:raw xperience.level_up}" height="11" />
</div>

</vb:if>

<vb:if condition="$vboptions[xperience_bar_colour_activity] !== 'Hide'">

<vb:if condition="$vboptions[xperience_postbitstyle]==2">
{vb:raw xperience.gfx_activity}
<div style="width:102px; height:2px;"></div>
</vb:if>

<div title="{vb:raw xperience.gfx_activity}" style="width:102px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_activity}_faded.png );">
<div title="{vb:raw xperience.gfx_activity}" style="width:1px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_activity}_left.png) ; display:inline; float:left;"></div>
<div title="{vb:raw xperience.gfx_activity}" style="width:1px; height:11px; margin-bottom:2px; background-image:url({vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_activity}_right.png ); display:inline; float:right;"></div>
<img alt="{vb:raw xperience.gfx_activity}" src="{vb:raw vboptions.bburl}/xperience/progress/{vb:raw vboptions.xperience_bar_colour_activity}.png" width="{vb:raw xperience.ppd}" height="11" />
</div>

</vb:if>
</div>

I use the 4.0.2 vBExperience