How to position header text - please help

[mattastic]

Hi folks,

Can anyone tell me how I can add a few pixels of padding to the header text so it is more central?

When I try and add padding, it messes up the background image.

Any help much appreciated


<style>
.portlet h3, .portletLong h3, #sidebar1 h3, #sidebar2 h3{
width:100%;
height:29px;
background-image: url(images/banner_grad_left.gif);
background-repeat: no-repeat;
background-color:red;

}
.portlet h3 span, #sidebar1 h3 span, #sidebar2 h3 span, .portletLong h3 span{
background-image: url(images/banner_grad_right.gif);
background-repeat: no-repeat;
background-position: right center;
width:100%;
height:29px;
float:right;

}
</style>


<h3 ><span>header text</span></h3>

[ss1289]

Have you tried "text-align: center"?

[mattastic]

Thanks for your reply, I'd like to align it vertically, not horizontally, so text-align doesnt work.

[WebJoel]

It looks to me (and, without seeing your entire code it's hard to say) as if you are trying to put a "div" inside of a "h" tag, which will not work. Nesting of block-levels inside of other block levels won't work as 'block-level' forces a newline.

And "span" inherits the height of the parent element because it is an "inline element" (in this case, whatever "h" you are using is "parent/block-level" and whatever "span" is within, is "child/inline-element") so re-stating height for SPAN that is the same as "parent" is redundant. Esp, if the height is taller than the parent, -that won't work. One could however, make the "span" height less-than the parent element for some neat effects..

'Aligning vertically' calls for maybe "line-height" and certainly "vertical-align:middle;" to be invoked. Again, would need to see your entire code :)