Στοίχιση Στοιχείων Inline-Block στη Δεξιά Πλευρά σε CSS

Ας στοιχίσουμε το στοιχείο στη δεξιά πλευρά:

<div class="parent">
	<span class="child">κείμενο</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">κείμενο</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">κείμενο</a>
</div>

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

Μετατρέψτε το σύνδεσμο σε στοιχείο inline-block, στη συνέχεια στοιχίστε το στη δεξιά πλευρά του γονέα.

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε το κείμενο μέσα στον σύνδεσμο να είναι στοιχισμένο στο κέντρο αυτού του συνδέσμου.