Image centering layout

dabblet.css

/**
 * Image centering layout
 */
 

 
html, body {
	margin: 10px;
	padding:0;
}

article {
	width: 400px;
	height: 120px;
	padding: 0;
	margin:0;
	overflow: hidden;
	position: relative;
}

figure {
	width: 120px;
	height: 120px;
	float: left;
	padding: 0;
	margin:0;
	overflow: hidden;
}

figure div{
	position:absolute; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
}

figure img {
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;
	max-width:100%;
	max-height:100%;
}

aside {
	margin: 0;
	padding: 0;
	width: 70px;
	height: 80px;
	float: right;
	text-align: center;
	vertical-align: middle;
	padding-top: 40px;
	overflow: hidden;

}

aside a {
	padding: 5px 10px;
	border: 1px solid black;
	border-radius: 30px;
	color: black;
	text-decoration: none;
}


aside a:hover {
	background-color: black;
	color: white;
}


h1, .text {
	margin: 0;
	padding:0;
	margin-left: 120px;
	margin-right: 70px;
}

h1 {
	font: 20px/20px;
	height: 40px;
}

.text {
	font: 10px/15px;
	height: 60px;
	overflow: hidden;
	position: relative;
	background-color: white;
}

.text:after {
	content: '  ...';
	position:absolute;
	bottom:0;
	right:0;
	background-color: white;
	font-weight: bold;
}

.third figure {
	position: relative;
}

.bottomlink {
	display: inline-block;
	height: 20px;
	text-decoration: none;
}

.bottomlink.first {
	float: left;
	margin-left: 10px;
	padding: 0 10px;
	border-radius: 5px;
	background-color: #555;
	color: #bbb;
}

.bottomlink.second{
	float: right;
	padding-right: 10px;
	color: #555;
}

dabblet.html

<article class="third float">
	<figure>
		<div>
			<img src="https://lh4.googleusercontent.com/-Fe1QhVIPO7I/Ti_i4ouR9DI/AAAAAAAAADo/7XIAUPWS0a4/s1073/230958-__9_0008.jpg">
		</div>
	</figure>
	<aside>
	<a href="#">></a>
	</aside>
	<h1>Lorem Ipsum</h1>
	<div class="text">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet tempor dui sed fermentum. Vestibulum nec augue sed tellus lacinia fermentum. Vivamus vel quam urna, sit amet placerat justo. Morbi convallis malesuada metus, a pretium neque vehicula eget. Vestibulum eget nisl eu sem mattis molestie eget et dui. Proin arcu eros, scelerisque at eleifend eget, molestie vehicula nunc. Quisque imperdiet blandit erat quis lacinia. Integer ac posuere libero. Proin ac risus quam, facilisis tempus massa. Sed ac mi nulla, ac ultricies eros. Aenean rhoncus sollicitudin tellus eu porta. Nam tincidunt sapien non nisi viverra pellentesque. Duis dapibus pellentesque felis, sed fringilla elit vulputate quis.
		Cras pellentesque mi sit amet risus tempor eget fringilla risus bibendum. Etiam congue, nunc eget viverra commodo, neque nisl imperdiet ligula, et vestibulum sem tellus non nulla. Vestibulum posuere placerat mi eget scelerisque. Duis lobortis commodo urna a tristique. Morbi et turpis libero. Duis sit amet sem vel dui tempor ultrices quis et elit. Mauris vitae elementum purus. In cursus, quam a hendrerit euismod, neque nisi iaculis metus, vel gravida purus nisl a est. In ullamcorper nisi non lorem auctor consequat. In in porta diam. Fusce et nunc elit, sed fringilla odio. Sed vel velit eu elit dignissim scelerisque. Maecenas quam nibh, pulvinar in tincidunt vitae, rhoncus eu felis. Etiam non mauris metus, vel euismod sem.
	</div>
	<a href="#" class="bottomlink first">200m</a>
	<a href="#" class="bottomlink second">2 ♥</a>
</article>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}