워드프레스 강좌 | 이미지 오른쪽 정렬하기

워드프레스에 이미지를 삽입할 때 왼쪽, 가운데, 오른쪽 정렬 또는 정렬 없음을 선택할 수 있습니다.

정렬 없음이나 가운데 정렬은 텍스트가 이미지 다음에 나옵니다. 그런데 왼쪽과 오른쪽 정렬은 이미지 옆에 텍스트가 나오도록 되어 있습니다.

예를 들어 오른쪽 정렬을 하면 다음과 같이 왼쪽에 텍스트가 나오게 됩니다.

하지만, 간혹 텍스트가 옆에 있지 않고 이미지만 오른쪽에 위치시켜야 하는 경우가 있습니다. 이럴 땐 직접 코딩을 해야 합니다.

이미지를 넣으면서 정렬 없음을 선택합니다. 그리고 글쓰기 폼을 텍스트(Text)로 변경하면 다음과 같은 코드가 있습니다.

<img class="alignnone size-full wp-image-968" alt="Image Alignment 150x150" src="http://dev-wordpress-3.cmsfactory.net/wp-content/uploads/2013/03/image-alignment-150x150.jpg" width="150" height="150" />

이를 다음과 같이 같이 바꿉니다. 빨간색이 추가하는 코드입니다.

<div style="text-align: right;">
<img class="alignnone size-full wp-image-968" alt="Image Alignment 150x150" src="http://dev-wordpress-3.cmsfactory.net/wp-content/uploads/2013/03/image-alignment-150x150.jpg" width="150" height="150" />
</div>

결과는 다음과 같습니다.

Created on 2013-12-09 14:10 | Updated on 2018-10-04 18:18

Book