• Locked
1 reply [Last post]
Fri, 2014-04-04 04:15
Squire4Hire
Squire4Hire's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT-6
Joined: 2014-04-04
Posts: 1
Points: 2

I'm hoping someone can help me out. I'm super new to HTML and CSS and the inability to debug drives me insane! I've been trying, to no avail, to vertically center a div within a div and to maintain a fluid design.

Here's what I have so far:

<!DOCTYPE html>
 
<html>
 
<head>
 
	<title></title>
 
	<link rel="stylesheet" href="normalize.css" />
<style>
	html, body{
		height: 100%;
		background: gray;
	}
 
	div.wrapper {
		width: 75%;
		height: 100%;
		background: white;
		margin: 0 auto;
	}
 
	header{
		width: 100%;
		height: 10%;
		background: salmon;
	}
 
	div.outer{
		text-align: center;
		height: 80%;
		width: 100%;
		background: yellow;	
	}
 
	section.main{
		  display: inline-block;
		  width: 200px;
		  height: 200px;
		  background: orange;
	}
 
	footer{
		width: 100%;
		height: 10%;
		background: teal;
	}
 
</style>
 
 
<body>
	<div class="wrapper">
		<header>
		</header>
 
		<div class="outer">
			<section class="main">
				test
			</section>
		</div>
 
		<footer>
		</footer>
	</div>
</body>
</html>

The idea is, obviously, to vertically center the orange box within the yellow box and enforce it to scale with the screen.

Any help would be hugely appreciated!

Top
Tags:
Sun, 2014-04-06 14:43
#1
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

You can do this by creating

You can do this by creating your parent a table-cell with a vertical-align of middle.
I saved a jsfiddle for you here.

Hope this solved your problem.

Check Maximum Webdesign for your online solutions

Top
  • Locked