How to center header image in Oxygen

  • Unknown's avatar
    numberstrong · Member ·

    Hi,

    I’m trying to set up a website for my business, and for the look of the site it’s important that my header image be centered. I’ve done a bunch of searching on the web for a fix to this, but copy/pasting everything I’ve found so far has come up empty. (It might be just a function of me being a novice at CSS.) The image default aligns to left.

    Is this just a problem with Oxygen?

    Thank you so much :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I checked http://stevelikesmathalot.wordpress.com/ and the header image looks centered right now. If you still need help, please provide a link to where we can see the left-aligned header image.

  • Unknown's avatar
    numberstrong · Member ·

    Hi, yes I actually did fix the problem, but it was not by inserting anything into the CSS that centers the image. Instead, I noted that Oxygen’s recommended width for the header image is 940 pixels, and recommended height is 150. My previous logo fell very far short of those numbers, so I opened the logo in a picture editor and put a whole bunch of white space on either side until it was 940×150 with the logo centered in that image (as opposed to being aligned to center by the website layout). When I inserted that new 940×150 image as my header, it solved the problem since it now occupied the entire space reserved for the header by Oxygen.

    As for actually getting Oxygen to align a header image to center, I still don’t know how to do that. But I recommend doing this to anyone who wants a quick fix. Just put a bunch of white space on either side of your logo (or if you don’t want white, some other color that will work with your logo) until it’s 940 pixels wide.

    -Steve

  • Unknown's avatar
    designsimply · Member ·

    Thanks for the explanation. It seems to me that the theme is designed to left-align the image instead of centering it—I wouldn’t say it was a problem with the theme, just a choice in the design.

    Here’s how you would center using CSS instead of uploading a different image size:

    #masthead > a  {
	display: block;
	width: 100%;
	text-align: center;
}
  • The topic ‘How to center header image in Oxygen’ is closed to new replies.