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 요소를 인라인 블록 요소로 변환한 후, 부모 요소의 오른쪽에 정렬하세요.

이전 과제를 수정하여 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;
}

링크를 인라인 블록 요소로 변환한 후, 부모 요소의 오른쪽에 정렬하세요.

이전 과제를 수정하여 링크 내부의 텍스트가 링크의 가운데에 정렬되도록 하세요.