Seeking help with adjusting the alignment of a centered div in this JSFiddle example. The goal is to have the text align vertically and horizontally within the div, but the current setup results in the top line being centered instead of the overall content. Any ideas on how to fix this?
Here is the HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Regret</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Bowlby+One+SC' rel='stylesheet' type='text/css'>
<link href='css/regret.css' rel="stylesheet">
</head>
<body>
<div id="container">
<div class="inner">
<h1>Regret</h1>
<p class="choice">Let it out</p>
<p class="choice">Wallow in it</p>
</div>
</div>
</body>
</html>
The CSS code used:
body { font-family: 'Gloria Hallelujah', cursive; margin:0; text-align:center; color: #5e7c88; }
h1, h2, h3 { font-family: 'Bowlby One SC', cursive; color: #4b5f6d; }
img { border: 0; }
#container { margin: 0 auto; }
.choice { font-family: 'Bowlby One SC', cursive; }
.inner { position: absolute; top: 50%; }