CSS를 사용하여 div 하단에 텍스트를 배치하는 방법
- 王林원래의
- 2020-11-27 11:28:587781검색
div 하단에 텍스트를 배치하는 Css 방법: 이는 [#txt{position:relative;} #txt p{position:absolute와 같은 위치 속성의 상대 위치 지정 및 절대 위치 지정을 통해 달성할 수 있습니다. ;}].
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.
배경:
Css에는 텍스트를 컨테이너 하단에 정렬하는 매개변수가 없습니다. 이 문제를 해결하려면 위치 속성을 사용하는 것이 좋습니다.
(학습 동영상 공유: css 동영상 튜토리얼)
속성 소개:
위치 속성은 요소의 위치 지정 방법 유형(정적, 상대, 절대 또는 고정)을 지정합니다.
속성 값:
absolute 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
fixed 브라우저 창을 기준으로 위치가 고정된 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
relative 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
정적 기본값입니다. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.
예:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#txt{
height:300px;
width:300px;
border:1px solid #333333;
text-align:center;
position:relative;
}
#txt p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id=txt>
<p>aadsad</p>
</div>
</body>
</html>관련 권장 사항: CSS 튜토리얼
위 내용은 CSS를 사용하여 div 하단에 텍스트를 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!