HTML을 사용하여 웹 페이지의 텍스트와 이미지를 가운데 또는 정렬하는 방법

내용을 가운데로, 왼쪽으로, 오른쪽으로 정렬하는 것은 페이지의 내용을 안배하는 데 매우 유용하다.이 강좌에서는 HTML을 사용하여 텍스트를 정렬하는 방법을 학습합니다.
웹페이지의 텍스트를 정렬하려면 style 속성과 속성text-align.을 사용할 수 있습니다
예를 들어, 다음 코드 세그먼트는 텍스트 "Sample text"를 중심으로 합니다.

<p style="text-align:center;">Sample text</p>

HTML 컨텐트를 왼쪽이나 오른쪽으로 정렬하려면 center 또는 left 로 대체합니다.
본 강좌에서 우리는 right 속성을 사용하여 웹 페이지의 맨 위에 있는 이미지와 텍스트를 가운데에 놓는 과정을 소개할 것이다. 예를 들어 demonstration website 참조.
이 내용을 가운데에 두려면 text-align 요소에 text-align 속성을 추가합니다. 이 요소는 홈페이지 상단의 배경 이미지, 개인 정보 이미지, 제목, 부제목과 링크를 포함합니다.<div> 파일에서 이 <div> 요소를 찾고 다음과 같이 강조 표시된 텍스트를 추가합니다.

...
<!--First section-->
<div style="background-image: url('https://html.sammy-codes.com/images/background.jpg');
background-size: cover; height:480px; padding-top: 80px; text-align: center;">
  <img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;">
  <h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>
  <p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>
  <p style="font-size: 20px; color:#1F9AFE;"><a href="Webpage FilePath";>About this site</a></p>
</div>
...

강조 표시된 index.html 속성만 복사하고 추가합니다. 이 HTML 코드의 다른 부분은 항목에 특정되지 않기 때문입니다.파일을 저장하고 브라우저에서 다시 로드합니다.다음을 수신해야 합니다.

이제 텍스트를 가운데에 맞추고 정렬하는 방법을 알고 demonstration site 위쪽과 비슷한 부분을 만들어야 합니다.다음 강좌에서, 우리는 프레젠테이션 사이트의 중간 부분을 다시 만들 것이다.