CSS를 사용하여 텍스트를 왼쪽, 오른쪽 및 가운데 정렬하는 방법
- 不言원래의
- 2018-11-15 10:26:4524480검색
텍스트의 위치는 웹 페이지 레이아웃에서 필수적입니다. 오늘의 기사에서는 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 파일을 표시하는 웹 브라우저입니다. 아래와 같은 효과가 표시됩니다.
코드 예 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으로 문의하세요.