Skip to content

Instantly share code, notes, and snippets.

@javierarques

javierarques/index.html

Created June 18, 2014 07:45
Show Gist options
  • Save javierarques/95b6c1ee0384b0419e18 to your computer and use it in GitHub Desktop.
Save javierarques/95b6c1ee0384b0419e18 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Javier.
Raw
index.html
<div class="table container">
<div class="table-cell">
<code>display: table-cell;</code>
</div>
</div>
<div class="wrapper container">
<div class="inline-block">
<code>display: inline-block;</code>
</div>
</div>
Raw
style.css
/* COMMON */
.container{
border: 2px solid #333;
text-align:center;
padding: 1em;
margin-bottom: 1em;
height: 200px;
}
/* TABLES */
.table{
display: table;
width: 100%;
}
.table-cell{
display: table-cell;
vertical-align: middle;
}
/* INLINE BLOCK */
.wrapper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 1px;
}
.inline-block{
display: inline-block;
vertical-align: middle;
}
Raw
vertical-align-middle.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment