Skip to content

Instantly share code, notes, and snippets.

@ljayz

ljayz/dabblet.css

Forked from abernier/index.css
Created August 10, 2012 09:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ljayz/3312867 to your computer and use it in GitHub Desktop.
Save ljayz/3312867 to your computer and use it in GitHub Desktop.
Download ZIP
Vertical centering CSS technique
Raw
dabblet.css
/**
* Vertical centering CSS technique
*/
div:before,
div p {display:inline-block; vertical-align:middle;}
div:before {content:" "; height:100%;}
Raw
dabblet.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Vertical centering CSS technique</title>
<link rel="stylesheet" href="index.css">
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
Raw
index.css
div:before,
div p {display:inline-block; vertical-align:middle;}
div:before {content:" "; height:100%;}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Vertical centering CSS technique</title>
<link rel="stylesheet" href="index.css">
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment