CSS를 사용하여 텍스트를 왼쪽, 오른쪽 및 가운데 정렬하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 텍스트를 왼쪽, 오른쪽 및 가운데 정렬하는 방법

不言

Nov 15, 2018 am 10:26 AM

조정

텍스트의 위치는 웹 페이지 레이아웃에서 필수적입니다. 오늘의 기사에서는 CSS를 사용하여 텍스트의 왼쪽, 오른쪽 및 가운데 정렬을 달성하는 방법을 아래에서 살펴보겠습니다.

텍스트 정렬(왼쪽 정렬, 오른쪽 정렬, 가운데 정렬)을 설정하려면 사용해야 하는 CSS 속성은 text-align 속성입니다. (관련 권장사항: CSS 학습 매뉴얼)

문법 형식:

text-align :(文本位置）

위치	설명
left	왼쪽 정렬
right	Right 정렬
center	가운데 정렬
justify	양쪽 끝 정렬

다음으로 이 네 가지 정렬 방법을 설정하는 방법을 살펴보겠습니다.

텍스트 왼쪽 정렬 설정 방법:

text-align：left;

텍스트 오른쪽 정렬 설정 방법:

text-align：right;

텍스트 정렬 설정 방법:

text-align：center;

텍스트 정렬 설정 방법:

text-align：justify;

구체 코드 예시 1을 살펴보겠습니다.

TextAlign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    php中文网左对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextRight">
    php中文网右对齐<br />
   php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextCenter">
    php中文网居中对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextJustify">
    php中文网<br />
    两端对齐<br />
    php中文网<br />
    php
    </div>
    </body>
    </html>

TextAlign.css

.TextLeft{
    margin-top:24px;    
    margin-left:32px;    
    border:1px solid #ff6a00;    
    width:480px;    
    text-align:left;
}
.TextRight {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: right;
}
.TextCenter {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: center;
}
.TextJustify {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: justify;    
    text-justify: distribute-all-lines;
}

결과 표시

사용 위의 HTML 파일을 표시하는 웹 브라우저입니다. 아래와 같은 효과가 표시됩니다.

CSS를 사용하여 텍스트를 왼쪽, 오른쪽 및 가운데 정렬하는 방법

코드 예 2:

텍스트 왼쪽 정렬:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
  text-align:left; 
  }
	</style>
</head>
<body>
<div class="leftText">左对齐</div>
</body>
</html>

텍스트 오른쪽 정렬:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
  text-align:right; 
  }
	</style>
</head>
<body>
<div class="rightText">右对齐</div>
</body>
</html>

가운데 정렬:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
  text-align:center; 
  }
	</style>
</head>
<body>
<div class="centerText">居中对齐</div>
</body>
</html>

이 문서는 여기에 있습니다. 추가 정보 텍스트 정렬에 대해서는 PHP 중국어 웹사이트의 CSS Video Tutorial 칼럼을 참고하세요! ! !

위 내용은 CSS를 사용하여 텍스트를 왼쪽, 오른쪽 및 가운데 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

CSS 박스 크기 부동산은 무엇을합니까?Apr 30, 2025 pm 03:18 PM

이 기사는 요소 치수 계산 방법을 제어하는 CSS 박스 크기 속성에 대해 설명합니다. Content-Box, Border-Box 및 Padding-Box와 같은 값과 레이아웃 설계 및 형태 정렬에 미치는 영향을 설명합니다.

CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?Apr 30, 2025 pm 03:17 PM

기사는 CSS, 주요 특성 및 JavaScript와 결합 된 애니메이션 작성에 대해 논의합니다. 주요 문제는 브라우저 호환성입니다.

CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?Apr 30, 2025 pm 03:16 PM

기사는 3D 변환, 주요 속성, 브라우저 호환성 및 웹 프로젝트에 대한 성능 고려 사항에 대한 CSS 사용에 대해 논의합니다. (문자 수 : 159)

CSS에 기울기를 추가 할 수있는 방법은 무엇입니까?Apr 30, 2025 pm 03:15 PM

이 기사는 CSS 그라디언트 (선형, 방사형, 반복)를 사용하여 웹 사이트 비주얼을 향상시키고 깊이, 초점 및 현대적인 미학을 추가합니다.

CSS의 의사 요소는 무엇입니까?Apr 30, 2025 pm 03:14 PM

기사는 CSS의 의사 요소, HTML 스타일을 향상시키는 데 사용 및 의사 급의 차이점에 대해 설명합니다. 실제 사례를 제공합니다.

See all articles

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.