두 열이 모두 직선으로 유지되도록 CSS에서 텍스트를 정렬하는 방법은 무엇입니까?

CSS(Cascading Style Sheets)는 HTML 문서의 모양과 형식을 지정하는 데 사용되는 스타일 시트 언어입니다. 웹 페이지 구조에서 콘텐츠 표시를 분리함으로써 CSS를 사용하면 웹 사이트의 레이아웃, 색상, 글꼴 및 기타 스타일을 제어할 수 있습니다.

CSS의 디스플레이: 테이블 속성을 사용하면 CSS에서 텍스트를 정렬할 때 두 열이 모두 일직선이 되도록 테이블과 같은 구조를 만들 수 있습니다. 그런 다음 display: table-cell 속성을 사용할 때 각 열의 수직 정렬 속성을 top 또는 lower로 설정하여 텍스트를 적절하게 정렬합니다.

방법

다음은 CSS에서 텍스트를 정렬하는 몇 가지 일반적인 방법입니다. -

• 텍스트 정렬 속성 사용

• 표시 속성 사용

• 플로트 속성 사용

이제 예시를 통해 각 방법을 자세히 알아볼까요?

방법 1: “text-align” 속성을 사용하세요

CSS에서 텍스트(두 열 모두 직선)를 정렬하는 첫 번째 방법은 "text-align" 속성을 사용하는 것입니다. 컨테이너 요소 내의 텍스트는 text-align 속성을 사용하여 정렬할 수 있습니다. center, left, align과 같은 값을 허용합니다.

예

다음 예에서는 "text-align" 속성을 사용하여 CSS에서 텍스트를 정렬하는 방법을 알아봅니다.

1단계 - HTML에서 div와 같은 컨테이너 요소 만들기 -

으아악

2단계 - 컨테이너 요소 내부의 두 열에 대해 두 개의 하위 요소를 만듭니다. -

으아악

3단계− CSS 스타일을 컨테이너 및 열 요소에 추가해야 합니다. −

으아악

4단계 - 열 요소를 콘텐츠로 채우기 -

으아악

5단계 - 컴퓨터 브라우저에서 결과를 미리 보면 두 개의 직선 열로 배열된 텍스트를 관찰할 수 있습니다.

6단계 - 최종 코드는 다음과 같습니다. -

으아악

방법 2: “표시 속성” 사용

유연한 레이아웃을 구축하려면 디스플레이 속성을 flex 또는 Grid로 설정하세요. justify-content 및 align-items 속성을 사용하면 다양한 레이아웃 모드에서 요소의 위치를 ​​관리할 수 있습니다.

예

다음 예에서는 표시 속성을 사용하여 CSS에서 텍스트를 정렬하는 방법을 알아봅니다

1단계 - HTML에서 div와 같은 컨테이너 요소 만들기 -

으아악

2단계 - 컨테이너 요소 내부의 두 열에 대해 두 개의 하위 요소를 만듭니다. -

으아악

3단계− CSS 스타일을 컨테이너 및 열 요소에 추가해야 합니다. −

으아악

4단계 - 열 요소를 콘텐츠로 채우기 -

으아악

5단계 - 컴퓨터 브라우저에서 결과를 미리 보면 두 개의 직선 열로 배열된 텍스트를 관찰할 수 있습니다.

6단계 - 최종 코드는 다음과 같습니다. -

으아악

방법 3: “float 속성” 사용

float 속성을 사용하면 요소가 상위 컨테이너의 왼쪽이나 오른쪽에 떠 있을 수 있습니다. 이를 사용하여 여러 열에 정렬된 텍스트를 만들어 여러 열 레이아웃을 만들 수 있습니다.

예

다음 예에서는 Float 속성을 사용하여 CSS에서 텍스트를 정렬하는 방법을 알아봅니다

1단계 - HTML에서 div와 같은 컨테이너 요소 만들기 -

으아악

2단계 - 컨테이너 요소 내부의 두 열에 대해 두 개의 하위 요소를 만듭니다. -

으아악

3단계− CSS 스타일을 컨테이너 및 열 요소에 추가해야 합니다. −

으아악

4단계 - 열 요소를 콘텐츠로 채우기 -

으아악

5단계 - 컴퓨터 브라우저에서 결과를 미리 보면 두 개의 직선 열로 배열된 텍스트를 관찰할 수 있습니다.

6단계 - 최종 코드는 다음과 같습니다. -

으아악

결론

CSS의 text-align 속성과 display 속성 모두 텍스트를 두 개의 수직 열로 정렬할 수 있습니다. 표시 속성은 요소가 블록 수준 요소로 표시되어야 하는지, 인라인 요소로 표시되어야 하는지와 같은 요소의 레이아웃을 나타냅니다.

위 내용은 두 열이 모두 직선으로 유지되도록 CSS에서 텍스트를 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!