How do I center the Heading image on the page [Solved]

[Clive]

Using the basic Template: left simple navigation + 1 column
I have changed the heading image but how do I center that image on the page?
I need this for when the page is viewed on a larger screen size.




CMSMS v 1.0.2

Thanks

[RonnyK]

Clive,

what if you change the folowing in your css

DIV#header H1 A {
DISPLAY: block; BACKGROUND: url(images/kilkenny_hurling_logo.jpg) #ffffff no-repeat 0px auto; TEXT-INDENT: -999em; HEIGHT: 80px; TEXT-DECORATION: none
}

Instead of 12px from the left it will center.

Ronny

[heatherfeuer]

Actually, the easiest way I've found to center a particular element is to give it a "margin: 0 auto;" in the css for the element.

[Clive]

RonnyK when iI put UR script in the heading image vanishes.


My present Script is:

div#header {
  height: 80px;    /* adjust according your image size */
  background: #ffffff;         
}

div#header h1 a {
/* you can set your own image here */
  background: #ffffff url(images/kilkenny_hurling_logo.jpg) no-repeat 0 12px;
  display: block;
  height: 80px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}


Where would I place the "margin: 0 auto"???? text in my script?

[RonnyK]

Clive,

my mistake, just add

Code: Select all

background-position: center

To your "div#header h1 a".

Ronny

[Clive]

Sorted
The image disappeared again UNTIL I noticed that the semi-colon was missing from the end of the text
background-position: center;
thanks Ronny.