CSS에서 텍스트를 가운데에 배치하는 방법
- 藏色散人원래의
- 2021-04-13 09:36:173479검색
CSS에서 텍스트를 가운데에 배치하는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 일부 텍스트 콘텐츠를 정의하고 마지막으로 "text-align" 또는 "line-height" 속성을 사용하여 텍스트를 가로 또는 세로로 가운데에 배치합니다.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
텍스트를 가로로 가운데에 맞추려면
text-align속성을 사용하세요.
text-align 속성은 가운데 값을 사용하여 텍스트를 가운데에 배치함으로써 요소에서 텍스트의 가로 정렬을 지정합니다.
text-align은 요소의 텍스트 줄이 서로 정렬되는 방식에 영향을 미치는 기본 속성입니다. left, right 및 center 값을 사용하면 요소의 텍스트가 각각 왼쪽 정렬, 오른쪽 정렬 및 가운데 정렬됩니다. 텍스트를 가운데 정렬하려면 center를 사용하면 됩니다.
이 속성은 텍스트 및 img 태그와 같은 일부 인라인 개체(또는 유사한 요소)의 중심 정렬을 설정합니다.
이 속성은 다음과 같은 특징을 가집니다.
1) 텍스트 정렬의 중심은 컨테이너의 텍스트만 대상으로 하며 컨테이너의 표시는 인라인 또는 인라인 블록입니다. 컨테이너 표시가 블록이면 내부 컨테이너의 내용이 중앙에 위치하지 않습니다.
2) 텍스트 정렬은 하향 전이적이며 계속해서 하위 요소로 전달됩니다. div를 설정하면 하위 div의 콘텐츠도 중앙에 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>렌더링:
line-height 속성을 사용하여 텍스트 한 줄을 수직으로 중앙에 배치합니다.
line-height 속성은 줄 사이의 거리(줄 높이)를 설정합니다. 음수 값은 허용되지 않습니다.
이 속성은 라인 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>렌더링:
vertical-align:middle +display:table-cell을 사용하여 여러 줄 텍스트를 수직으로 가운데에 배치하세요
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>
</body>
</html>렌더링:
지침: 수직 정렬: 중간 +display:table-cell은 한 줄 텍스트와 여러 줄 텍스트를 모두 가운데에 배치할 수 있습니다. 그러나 table-cell은 인라인 유형이므로 원래 블록 수준 요소가 div당 동일한 행으로 이동됩니다. 행을 두 행으로 나누어야 하는 경우 외부에 별도의 컨테이너를 추가하여 위치를 조절해야 합니다.
【추천 학습: css 동영상 튜토리얼】
위 내용은 CSS에서 텍스트를 가운데에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!