...

View Full Version : Trouble centering header or masthead



photomom86
02-09-2012, 01:29 PM
Hello, I am new here and newish to CSS & html. I know some very basic rules and that is it. I have a wordpress blog greeneyedcountrygirl.com (http://greeneyedcountrygirl.com) and I have customized the theme (code posted below) so that the main column and the sidebar is wider. Now I can't seem to figure out how to get my header/masthead to be centered.

Any help would be greatly appreciated!!

I have figured out enough that this is the part of the code I need to work on.


}
#masthead img,
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

#masthead img,
img.size-full {
max-width: 85%;
width: 85%; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

sunfighter
02-09-2012, 04:14 PM
The method I use to center anything in CSS is

margin-right:auto;
margin-left:auto;

Major Payne
02-11-2012, 03:43 AM
Centering an element requires setting a width to the exact width of the content, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:


body {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Example as a Class:


.selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class:
<div class="selector_name">Content here</div>

Example as an ID:


#selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

HTML for Class:
<div id="selector_name">Content here</div>

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum