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으로 문의하세요.