Uitlijnen van inline-block elementen naar rechts in CSS

Laten we een element naar rechts uitlijnen:

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

Gegeven een div binnen een ouder element:

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

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

Converteer de child-div naar een inline-block element en lijn het vervolgens naar rechts uit binnen de ouder.

Pas de vorige opdracht aan zodat de div niet strak tegen de rechterkant aan zit. Voeg hiervoor rechter padding toe aan het ouderelement.

Pas de vorige opdracht aan zodat de div niet strak tegen de rechterkant aan zit. Geef hiervoor het child-element een rechter margin.

Gegeven een link binnen een ouder element:

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

Converteer de link naar een inline-block element en lijn het vervolgens naar rechts uit binnen de ouder.

Pas de vorige opdracht aan zodat de tekst in de link gecentreerd is binnen deze link.