Skip to content

Instantly share code, notes, and snippets.

@kreo

kreo/centering-in-the-unknown.html

Created June 1, 2015 15:53
Show Gist options
  • Save kreo/33087d1f6b4d9407be9c to your computer and use it in GitHub Desktop.
Save kreo/33087d1f6b4d9407be9c to your computer and use it in GitHub Desktop.
Download ZIP
Centering in the Unknown - blocks
Raw
centering-in-the-unknown.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Card preview with center text</title>
<style>
*{
box-sizing: border-box;
}
/* This parent can be any width and height */
.block {
text-align: center;
background: #fff;
margin-bottom: 50px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.block__centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
</head>
<body>
<div class="block" style="height: 300px;">
<div class="block__centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="block__centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="block__centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment