Text Align

dabblet.css

body {
	padding:100px;
	background:#FFF;
	color:#000;
	font-family:sans-serif;
	}
.box {
	width:100%;
	transition:width 2s;
	}
.box:hover {
	width:30%;
	}
.nav {
	overflow:hidden;
	}
	.prev,
	.next {
		width:20%;
		margin:0 0 20px;
		}
		.prev a,
		.next a {
			display:block;
			padding:20px 30px;
			background:#CCC;
			color:#C00;
			text-decoration:none;
			}
	.prev {
		float:left;
		}
	.next {
		float:right;
		}

/* Text Align  */
.align .prev {
	text-align:left;
	}
.align .next {
	text-align:right;
	}

/* Direction */
.dir .prev {
	direction:ltr;
	}
.dir .next {
	direction:rtl;
	}

dabblet.html

<div class="box">
	<div class="nav align">
		<div class="prev"><a href="">Предыдущая</a></div>
		<div class="next"><a href="">Следующая</a></div>
	</div>
	<div class="nav dir">
		<div class="prev"><a href="">Предыдущая</a></div>
		<div class="next"><a href="">Следующая</a></div>
	</div>
</div>

settings.json

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