// a border-box mixin
// (which I assume everyone has in their partials?)
@mixin bbox {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
// variables
$cmbox-default-bg-color: #ccc;
$cmbox-default-padding: 4rem;
// the holder
.cmbox {
@include bbox;
width: 100%;
display: table;
padding: $cmbox-default-padding;
text-align: center;
background-color: $cmbox-default-bg-color;
}
// the content
.cmbox__content {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
// etc
.cmbox__title {
margin: 0;
padding: 0;
}
/* markup
<div class="cmbox">
<div class="cmbox__content">
<h1 class="cmbox__title">Hello world!</h1>
</div>
</div>
*/
Not exactly the most modern implementation of a middle-aligned, center-aligned content box. But it's a rather simple and useful solution to a huge short-coming of CSS. I still use it often.
1 Response
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.