XF 1.3 Help Centering User Banner Image

[PAPPACLART]

Hello Gents

Finally got my custom user banner image to display on my test migration site but I can't get the images to center. I have google searched and looked on the site and have scanned some CSS guides but centering is not working for me. I was hoping one of you chaps could help?

(Note: I am using my own images and not Xen's generated banners)

Here is my code minus my poor effort at centering (which is a copy an paste of somebody else's)

.userBanner.admin
{
background: url("@imagePath/xenforo/gradients/admin.png")no-repeat;
width: 89px;
height: 17px;
color: transparent;
display: block;

}

.userBanner.gbrc
{
background: url("@imagePath/xenforo/gradients/gbrcclub.png") no-repeat;
  width: 89px;
  height: 17px;
  color: transparent;
  display: block;

}

I am loving Xenforo, great work chaps and have just started customizing my test installation but User Rank implementation is Poor. Why can't it be like uploading an avatar, even VB can get that right! lol

Any help would be great as I have spent too many hours messing lol

Thanks in advance.

Ryan

 

[Paul B]

Difficult to say without seeing the page with the code on but try adding margin 0 auto.

 

[PAPPACLART]

Hey there thanks

I added but does not work still. Here is a link to the test site

.userBanner.admin
{
background: url("@imagePath/xenforo/gradients/admin.png")no-repeat;
width: 89px;
height: 17px;
color: transparent;
display: block;
margin: 0 auto;

}

EDIT

I inspected the element in google chrome and found this code. If I change the margin left to + 5 it centres. what part of this code do I add to my extra.css?

.messageUserBlock .userBanner {
display: block;
margin-bottom: 5px;
margin-left: -12px;
margin-right: -12px;
}

 

[PAPPACLART]

looks like I fixed it. Copied that code I found after inspecting the element in chrome to extra css. and added .admin after .userbanner and did the same for the gbrc banner.

Thanks

 

[Paul B]

You have different left and right margins.
Setting margin 0 auto seems to resolve it.



You may need to use !important to override some of the default CSS.