Link to home
Start Free TrialLog in
Avatar of jeffiepoo
jeffiepooFlag for United States of America

asked on

css margin 0 auto problem

Hey Experts, I cannot get this stuff displaying in the middle of the page using margin: 0 auto. Please help!

Here is my HTML:

<html>
	<head>
		<title>
			Search
		</title>
		<link href="css/global.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class='wrapper'>
		<form id="searchFormId" name="searchForm" method="post">
			<div class="headerLabel">Simple Search</div>
			<input type="text" name="searchTerm" />
                        ......
                        ......
			<label for="SubmitButton">Submit</label>
			<input id="SubmitButton" type="submit" value="Submit" />
		</form>
		</div>
	</body>
</html>

Open in new window


Here is the css:
body{
	width: 100%;
}
.wrapper{
	margin: 0 auto;
}
.headerLabel{
	font-family: 'Marko One', serif;
	color: #2E9AFE;
	margin: 0 auto;
	font-size: 44px;
}
.searchBox{
	font-family: 'Marko One', serif;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Gary
As kozaiwaniec has said, you need to give a width to your element to centre it using an auto left/right margin.

Your .headerLabel will automatically be set to the same width as the .wrapper div, so if you want to centre the text in that, then you will need to use text-align:center, rather than an auto margin.

@Gary: your fiddle doesn;t really seem to work. Your HTML has a class of wrapper but your CSS has #wrapper. It also has no width, so won't centre. ;)