Подравняване на inline-block елементи по десния край в CSS

Нека подравним елемента по десния край:

<div class="parent">
	<span class="child">text</span>
</div>

.parent {
	text-align: right;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}

Даден е div вътре в някакъв родител:

<div class="parent">
	<div class="child">text</div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}

Преобразувайте div-потомъка в inline-block елемент, след което го подравнете по десния край на родителя.

Модифицирайте предходната задача така, че div да не се притиска плътно към десния край. За това на родителския елемент добавете десен padding.

Модифицирайте предходната задача така, че div да не се притиска плътно към десния край. За това на елемента-потомък задайте десен margin.

Дадена е връзка вътре в някакъв родител:

<div class="parent">
	<a href="" class="child">text</a>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	width: 100px;
	padding: 10px;
	border: 1px solid green;
}

Преобразувайте връзката в inline-block елемент, след което го подравнете по десния край на родителя.

Модифицирайте предходната задача така, че текстът вътре във връзката да бъде подравнен в центъра на тази връзка.