Question Aligning header in center without creating a margin

Hi there,

I am trying to align the header text so that it is in the center instead of at the left. I found the code to do it:

The float value is now "center", whereas before it was "left". My problem is that it now creates a small padding or margin underneath the header that wasn't there before. If I change the float value back to "left," the margin goes away. Is there some way to align the header in the center without this margin appearing?

Here are screenshots of what I'm talking about:

Centered with margin
Left-aligned without margin

Thank you!

ah nice looks brilliant i like your template aswell thanks

McGriddles: as far as your problem is concerned, I think the Law of Diminishing Returns applies. I spent about an hour looking at ways to easily fix your problem. Not easy to solve.

if its actualy a margin then:

margin-bottom: 0px;

or

margin-bottom: 0px !important;


but if its padding then :

padding-bottom: 0px;

or

padding-bottom: 0px !important;

personaly i think its a margin but without the live site to play with i have no idea

I experimented here at www.kunena.com . I couldn't get a satisfactory solution. Try it for yourself. The extra "padding" is caused by the placement of the "display: block" for the Forum Tools; that's what you have to overcome. The answer is not quite as straightforward as removing (or setting) the style for the div.fb_title_cover margin-bottom or padding-bottom. There's one or two other objects that need to be moved around, too. Like I said, I spent about an hour trying to squeeze out a couple of pixels - hence my Law of Diminishing Returns remark.

You can try in that way

#Kunena div.fb_title_cover {
/*float:left;*/
text-align:center;
color:#FFFFFF;
font-weight:normal;
line-height:normal;
padding:2px;
margin-left:2px;
}

#Kunena img.hideshow {
cursor:pointer;
float:right;
margin:-20px 0 0;
padding:0;
position:relative;
z-index:1;
}