Skip to content

Instantly share code, notes, and snippets.

@craigerskine

craigerskine/vertical-center.html

Last active August 29, 2015 14:06
Show Gist options
  • Save craigerskine/ef06a6fbdb51b835ee8b to your computer and use it in GitHub Desktop.
Save craigerskine/ef06a6fbdb51b835ee8b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vertical-center.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSS: Vertical Centering</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<style>
body { padding: 3em 20px; background: #333; color: #CCC; font: 300 14px/1.5 'Open Sans', Arial, sans-serif; }
a { color: #999; text-decoration: none; }
a:hover,a:focus { color: #999; text-decoration: none; outline: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 15px; }
p,ul,ol { margin: 0 0 20px; }
ul ul,ul ol,ol ol,ol ul { margin: 0; }
hr { margin: 0 0 19px; }
.container { max-width: 940px; }
.box { margin: 0 auto 100px; width: 200px; background: rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.1); box-shadow: inset 0 0 5px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.1); }
.middle { margin: 10px; padding: 10px; background: rgba(255,255,255,0.15); color: #FFF; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.15); box-shadow: 0 0 5px rgba(0,0,0,0.15); }
.middle p { margin: 0; }
/* vert-center: line height stacking */
.box { height: 200px; line-height: 200px; }
.middle { display: inline-block; vertical-align: middle; line-height: 1.5; }
/* vert-center: pseudo element */
.list-cta,.list-cta li { margin: 0 0 20px; list-style: none; }
.list-cta li { margin: 0 0 1px; width: 25%; height: 200px; float: left; text-align: center; }
.list-cta p:before { width: 1%; height: 100%; display: inline-block; vertical-align: middle; content: " "; }
.list-cta p { margin: 0 0 0 1px; height: 100%; background: #666; }
.list-cta a { border: 2px solid #306644; border-width: 2px 0; padding: 6px 0; width: 70%; color: #FFF; font-size: 20px; display: inline-block; vertical-align: middle; }
/* tablet landscape */
@media only screen and (max-width: 979px){
}
/* tablet portrait / mobile landscape */
@media only screen and (max-width: 767px){
.list-cta li { width: 50%; }
}
/* mobile portrait */
@media only screen and (max-width: 479px){
.list-cta li { width: 100%; height: 100px; float: none; }
.list-cta a { font-size: 14px; }
}
</style>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="box">
<div class="middle">
<p>I'm vertically centered multiple lines of text in a container. Centered via line-height stacking.</p>
</div>
</div>
<ul class="list-cta clearfix">
<li><p><a href="#">Alternate method</a></p></li>
<li><p><a href="#">Uses :before pseudo element</a></p></li>
<li><p><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></p></li>
<li><p><a href="#">Lorem ipsum.</a></p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment