Right Aligning Inline-Block Elements in CSS

Let's align the element to the right edge:

<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;
}

Given a div inside some parent:

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

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

Convert the child div to an inline-block element, then right-align it to the parent.

Modify the previous task so that the div is not pressed tightly against the right edge by adding right padding to the parent element.

Modify the previous task so that the div is not pressed tightly against the right edge. To do this, give the child element a right margin.

A link is given inside some parent:

<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;
}

Convert the link to an inline-block element, then right-align it to its parent.

Modify the previous task so that the text inside the link is centered within that link.