Why wont the image center? - Computer Programmers, Programming Forum

omen · #1 08-06-2009

I have two image and I want the "h1" image to center

even tho I have written in "background-position:center;" it will wont work

style.css

Code:

@charset "UTF-8";
/* CSS Document */	
body { background-color:#000;
	background-image:url(images/JeffreeStarBG.png);	
	background-repeat:no-repeat;
	background-position: top center;
	padding-top:100px;
	background-attachment:fixed;
}

h1 { z-index: 3;
	position:absolute;
	top:350px;
	width:480px;
	height:80px;
	margin:0;
	padding:0;
	background-image:url(images/logo.png);
	background-position:center;
	text-indent:-9999px;
}

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="style.css" media="all" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Title</title>

</head>
<body>
<h1>Logo Here</h1>
<h2>Welcome</h2>


</body>
</html>

Stephen Bryant · #2 08-07-2009

Wouldn't this just center the image within the h1 tag? I don't have your images, but it seems to me that's what it would do.

Stealther · #3 09-08-2009

Have you tried to put a <center> </center> tag around the <h1></h1> tags? I have my logo in the center and I just place the image inside <center></center> tags and that seems to help out....try that

Umang · #4 09-09-2009

Avoid using <center> tags. They are deprecated.

<center> tags are deprecated. Try using relative positioning instead of absolute positioning. Then you should also remember that when you say background-center, you are centering the BG in the h1. If the h1 itself is not centered with respect to the page, then the BG won't be centered w.r.t the page.
Try making positioning relative and then change "margin" from "0" to "0 auto". (zero space 'auto'). Here's the first result from Google about auto margins: CSS Centering: Auto-width Margins

Stealther · #5 09-09-2009

Quote:

Avoid using <center> tags. They are deprecated.

<center> tags are deprecated. Try using relative positioning instead of absolute positioning. Then you should also remember that when you say background-center, you are centering the BG in the h1. If the h1 itself is not centered with respect to the page, then the BG won't be centered w.r.t the page.
Try making positioning relative and then change "margin" from "0" to "0 auto". (zero space 'auto'). Here's the first result from Google about auto margins: CSS Centering: Auto-width Margins

Oh thanks Umang, I didn't know that those tags were deprecated....but it still works on my site!

Umang · #6 09-10-2009

It is deprecated by the W3C, which means that by the HTML (or XHTML) standards, the usage of <center> tags should be avoided. Pages using center tags will not be considered as valid by the W3C validator.

Alignment, font styles, and horizontal rules in HTML documents

However, browsers will still center everything inside a <center> tag, to support old websites. Old versions of IE may be pretty fussy, and will require workarounds to get something to center without <center> tags.

Reading a little from the net will help you understand how to center something with CSS. When to use the text-align property and when to use the margin. property.

phasex · #7 09-21-2009

There is a way around this. create an inline style for the header (h1) tag.

<h1 style="text-align:center; margin-left:auto; margin-right:auto">....</h1>

text-align is used to accommodate for IE users.

Welcome to our forums...

Latest Posts

Forum Statistics

Partner Sites

Friends

Welcome to our forums...

Latest Posts

Forum Statistics

Partner Sites

Sponsor

Friends