How to get div tag to sit vertically center of page
How do I get the content div to sit vertically center?
<!DOCTYPE html>
<html charset="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Italianno' rel='stylesheet' type='text/css'>
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="head-banner">
<p>
<img src="imgs/kevinbarlow.png" />
Building Contractor
<span>Key West, Florida</span></p>
</div>
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>html,
body {
margin:0;
padding:0;
height:100%;
}
html{
background: url(S12_Blueprints.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrapper {
min-height:100%;
width: 100%;
position:relative;
}
#header {
background:#000000;
height: 20px;
padding:0;
border-bottom: 2px solid red;
}
#head-banner{
height: 75px;
max-width: inherit;
margin-top: 0;
margin-bottom: 0;
background-color: #ffffff;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 12px 12px -3px black;
}
#head-banner p{
/*display: inline-block;*/
vertical-align: middle;
margin-top: 0;
color: gray;
font-weight: bold;
}
#head-banner span{
font-family: 'Italianno', cursive;
font-size: x-large;
padding-left: 20px;
}
#head-banner img{
vertical-align: middle;
padding-right: 30px;
padding-left: 20px;
}
#content {
min-width: 100%;
height: 300px;
vertical-align: middle;
border: 1px solid black;
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
border: 1px solid black;
-webkit-box-shadow: 0 -12px 10px -3px black;
-moz-box-shadow: 0 -12px 10px -3px black;
box-shadow: 0 -12px 10px -3px black;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.