Just starting on laying out a web design and I have not been able to find a way to get a h1- text line located in the vertical center of the header div.
Have tried using a top-margin value on the h1 tag itself using CSS, but this drops the entire header & container down without effecting the vertical h1 location inside the header div.
Note:
Having no trouble aligning the h1 text horizonally using the left margin settings in CSS.
What should I do to get the h1 text aligned vertically at about 62px below the top of the header div?
Am using Firefox to check my layout.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="fmscss.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h1>fullmoonsphinx.net</h1>
</div>
</div>
</body>
</html>
************************************************** ********
CSS
body {
margin-top: 20px;
margin-bottom: 20px;
padding: 0;
background: #777777;
}
#container{
position:relative;
margin:0 auto;
padding:0;
width:740px;
}
#header {
width: 100%;
height: 125px;
background: #000000 url(images/logo/logo.jpg) top left no-repeat;
}
#header h1 {
margin-top: 62px; <---- getting unusual effects using this setting
margin-left: 180px; <---- horizontal placement works fine
padding: 0;
font-family: Arial, Helvetica, sans-serif; font-variant: small-caps;
font-size: 1.8em;
color: White;
} |
