Skip to content

Instantly share code, notes, and snippets.

@ashumeow

ashumeow/dabblet.css

Last active August 29, 2015 13:56
Show Gist options
  • Save ashumeow/8998511 to your computer and use it in GitHub Desktop.
Save ashumeow/8998511 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dabblet.css
/**
* Vertically & horizontally centered images
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100;
}
.group {
display: table;
table-layout: fixed;
width: 100;
word-spacing: -1em;
}
.item {
display: table-cell;
height: 300;
width: 25;
padding: 20;
vertical-align:center;
word-spacing: 0;
text-align: center;
border: 5 solid black;
background: #fff;
}
.item img {
display: inline-block;
width: auto;
max-width: 100;
height: auto;
max-height: 100;
vertical-align:center;
}
Raw
dabblet.html
<div class="group">
<div class="item"><img src="http://lorempixel.com/200/100/animals" /></div>
<div class="item"><img src="http://lorempixel.com/100/200/animals" /></div>
<div class="item"><img src="http://lorempixel.com/100/100/animals" /></div>
<div class="item"><img src="http://lorempixel.com/1000/1000/animals" /></div>
</div><!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment