[CSS.020] 글자,이미지 가운데 정렬하기

[CSS.020] 글자 가운데 정렬하기

최종 실행결과

 

위 그림처럼 div 태그 안에 있는 글자와 이미지를 정 가운데 정렬하는 방법에 대해 알아보겠습니다.

 

 

[1] div 태그안에 글자, 이미지 만들기

코드1의 실행화면

먼저, 위 그림과 같이 div 태그 3개를 만들고, 그 div 태그 안에 숫자 1, 2, 그리고 사과 이미지를 넣겠습니다.

코드1

 

[2] 가로 방향으로 가운데 정렬하는 방법

코드2의 실행화면

위 그림과 같이 div 태그 안에 글자와 그림을 "가로방향"에서 가운데로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다.

 

코드2

 

 

[3] 정 가운데에 정렬하는 방법

코드3의 실행화면

위 그림과 같이 div 태그 안에 글자와 그림을 "화면 정 가운데"로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다.

 

 

[4] 세로 방향으로 가운데 정렬하는 방법

코드4의 실행화면

위 그림과 같이 div 태그 안에 글자와 그림을 "세로방향"에서 가운데 정렬하려면 div태그에 다음의 명령어를 주면 됩니다.