oksushi/dabblet.css

## dabblet.css
/**
 * Using table display to vertically centre a list of blocks
 */

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: justify;
}
li {
text-align: center;
display: inline-table;
width: 200px;
background: #eee;
vertical-align: top;
height: 100px;
}
a {
display: table-cell;
vertical-align: middle;
transition: .5s background;
}
a:hover {
background: hotpink;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
	<li><a href="/">Text</a></li>
	<li><a href="/">Longer Text onto two lines, Longer Text onto two lines</a></li>
	<li><a href="/">Text</a></li>
	<li><a href="/">Longer Text onto two lines, Longer Text onto two lines</a></li>
</ul>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Using table display to vertically centre a list of blocks
	*/

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: justify;
	}
	li {
	text-align: center;
	display: inline-table;
	width: 200px;
	background: #eee;
	vertical-align: top;
	height: 100px;
	}
	a {
	display: table-cell;
	vertical-align: middle;
	transition: .5s background;
	}
	a:hover {
	background: hotpink;
	}
	<!-- content to be placed inside <body>…</body> -->
	<ul>
	<li><a href="/">Text</a></li>
	<li><a href="/">Longer Text onto two lines, Longer Text onto two lines</a></li>
	<li><a href="/">Text</a></li>
	<li><a href="/">Longer Text onto two lines, Longer Text onto two lines</a></li>
	</ul>