HTML에서 텍스트 위치를 설정하는 방법-HTML 튜토리얼-php.cn

HTML에서 텍스트 위치를 설정하는 방법

青灯夜游

풀어 주다： 2022-01-12 15:40:54

원래의

53451명이 탐색했습니다.

HTML에서 텍스트 위치를 설정하는 방법: 먼저 위치 속성을 사용하여 텍스트 요소의 위치 지정 유형(절대 위치 또는 고정 위치 지정)을 설정한 다음 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 오프셋 값을 설정합니다. 텍스트 요소를 선택한 다음 텍스트 요소의 위치를 설정합니다.

HTML에서 텍스트 위치를 설정하는 방법

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

html에서 텍스트 위치를 설정하는 방법:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			p#p1{
				position: absolute;
				top: 20px;
				left: 20px;
			}
			p#p2{
				position: absolute;
				bottom: 0px;
				right: 20px;
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="HTML에서 텍스트 위치를 설정하는 방법" >
		<p id="p1">测试文本！测试文本！</p>
		<p id="p2">测试文本！测试文本！</p>
	</body>

</html>

로그인 후 복사

렌더링:

HTML에서 텍스트 위치를 설정하는 방법

설명:

위치 속성 은 요소의 위치 지정 유형을 지정합니다.

이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.

값	설명
absolute	정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다.
fixed	브라우저 창을 기준으로 절대 위치의 요소를 생성합니다. 요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다.
relative	일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
static	기본값입니다. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.