Reaalploki elementide joondamine paremale äärele CSS-is

Joondame elemendi paremale äärele:

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

Antud div mõne vanema sees:

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

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

Teisendage div-järglane reaalploki elemendiks, seejärel joondage see vanema paremale äärele.

Modifitseerige eelmist ülesannet nii, et div ei surutu tihedalt parema ääreni. Selleks lisage vanemaelemendile parem padding.

Modifitseerige eelmist ülesannet nii, et div ei surutu tihedalt parema ääreni. Selleks määrake järglaselemendile parem margin.

Antud link mõne vanema sees:

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

Teisendage link reaalploki elemendiks, seejärel joondage see vanema paremale äärele.

Modifitseerige eelmist ülesannet nii, et tekst lingi sees oleks joondatud selle lingi keskele.