CSS에서 텍스트를 가운데에 배치하는 방법-CSS 튜토리얼-php.cn

CSS에서 텍스트를 가운데에 배치하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:10:09

원래의

26478명이 탐색했습니다.

텍스트 중앙 정렬 방법: 1. "text-align:center;" 문을 사용하여 수평 중앙 정렬을 설정합니다. 2. CSS3의 flex 레이아웃을 사용하여 수직 정렬을 설정합니다. cell; ” 문은 수직 중심을 설정합니다.

CSS에서 텍스트를 가운데에 배치하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css는 텍스트를 가로 가운데로 설정합니다.

CSS에서는 text-align 속성을 사용하여 글꼴을 가로 가운데로 설정할 수 있습니다. 이 속성은 중앙 값을 사용하여 텍스트를 중앙에 배치함으로써 요소 내 텍스트의 가로 정렬을 지정합니다.

text-align 구문:

text-align : left | right | center | justify

로그인 후 복사

text-align 매개변수 값 및 설명:

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데
정당화: 양쪽 끝 정렬(권장하지 않음, 일반적으로 대부분의 브라우저에서 사용하지 않음)

텍스트 정렬에 일반적으로 사용되는 매개변수 값은 왼쪽, 오른쪽, 가운데입니다

이 속성은 다음과 같은 특성을 갖습니다.

1) , text-align의 중심은 컨테이너의 텍스트와 디스플레이가 인라인 또는 인라인 블록인 컨테이너만 대상으로 합니다. 중앙에 있지 마십시오.

2) 텍스트 정렬은 하향 전이적이며 계속해서 하위 요소로 전달됩니다. div를 설정하면 하위 div의 콘텐츠도 중앙에 배치됩니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 水平居中</title>
		<style>
			.box {
				width: 400px;
				height: 100px;
				background: palegoldenrod;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="box">css文本文字--水平居中</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 텍스트를 가운데에 배치하는 방법

(동영상 공유 학습: css 동영상 튜토리얼)

css 텍스트를 세로로 가운데 맞춤

1 , CSS3 플렉스 레이아웃 사용 텍스트를 세로로 가운데에 배치합니다

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
			    width: 300px;
			    height: 300px;
			    background: palegoldenrod;
			    line-height:300px;
			     /*设置为伸缩容器*/
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
			    display: -webkit-flex;
			    display: flex;
			    /*垂直居中*/
			    -webkit-box-align: center;/*旧版本*/
			    -moz-box-align: center;/*旧版本*/
			    -ms-flex-align: center;/*混合版本*/
			    -webkit-align-items: center;/*新版本*/
			    align-items: center;/*新版本*/
			}
		</style>
	</head>
	<body>
		<div class="box">css 文本文字--垂直居中（弹性布局）</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 텍스트를 가운데에 배치하는 방법

2.vertical-align:middle +display:table-cell 텍스트를 세로로 가운데에 배치합니다

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background: palegoldenrod;
				vertical-align:middle;
				display:table-cell;
			}
		</style>

	</head>

	<body>

		<div class="box">css 文本文字--水平居中</div>

	</body>

</html>

로그인 후 복사

Rendering:

CSS에서 텍스트를 가운데에 배치하는 방법

설명: 세로 - align:middle +display:table-cell은 한 줄 텍스트와 여러 줄 텍스트를 가운데에 배치할 수 있습니다. 그러나 table-cell은 인라인 유형이므로 원래 블록 수준 요소가 div당 동일한 행으로 이동하게 됩니다. 행을 두 행으로 나누어야 하는 경우 외부에 별도의 컨테이너를 추가하여 위치를 조절해야 합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS에서 텍스트를 가운데에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!