CSS: Add styles for centering content of unknown width and height both horizontally and vertically

This commit is contained in:
Eric Lippmann 2015-12-10 12:31:25 +01:00
parent bcd1402123
commit 012fdf9cb5
1 changed files with 32 additions and 0 deletions

View File

@ -227,3 +227,35 @@ a:hover > .icon-cancel {
margin-left: 0.5em;
}
}
/* Styles for centering content of unknown width and height both horizontally and vertically
*
* Example markup:
* <div class="centered-ghost">
* <div class="centered-content">
* <p>I'm centered.</p>
* </div>
* </div>
*/
.centered-content {
display: inline-block;
vertical-align: middle;
}
.centered-ghost {
height: 100%;
text-align: center;
letter-spacing: -1em; // Remove gap between content and ghost
}
.centered-ghost > * {
letter-spacing: normal;
}
.centered-ghost:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}