HTML에서 텍스트를 아래쪽으로 설정하는 방법-HTML 튜토리얼-php.cn

HTML에서 텍스트를 아래쪽으로 설정하는 방법

藏色散人

풀어 주다： 2023-01-03 09:25:34

원래의

21092명이 탐색했습니다.

html에서 텍스트를 아래쪽으로 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 텍스트 콘텐츠를 정의한 다음 상위 요소에 CSS 속성 "position:relative"를 설정합니다. 텍스트를 저장하는 요소 속성은 "boottom:0"입니다.

HTML에서 텍스트를 아래쪽으로 설정하는 방법

이 문서의 운영 환경: Windows7 시스템, HTML5&&CSS3, Dell G3 컴퓨터

1. 텍스트 또는 기타 블록 수준 요소인 경우. 포지셔닝 아이디어를 활용하세요. position: 절대, boottom: 0. 상위 요소는 position:relative로 설정되어야 합니다.

절대 위치 지정은 가장 가까운 비정적 위치 요소를 기준으로 하기 때문입니다. 그러나 동일한 상위 요소 내에 여러 요소가 있고 절대 위치로 이동해야 하는 경우, 이를 직접 수행하면 해당 요소가 float처럼 정상적으로 정렬되지 않고 겹쳐지게 된다는 점을 유의해야 합니다.

이것은 동일한 상위 요소를 갖기 때문입니다. 절대 위치 지정을 사용한 후에는 원래 위치에 머물지 않고 상위 요소의 왼쪽으로 이동합니다.

이 상황을 해결하려면 이동해야 하는 요소에 대해 상위 요소를 중첩하고 해당 상위 요소의 위치를 지정하고 상위 요소를 기준으로 설정하여 원래 상위 요소가 상위 요소가 되도록 해야 합니다. .

이런 식으로 절대 위치 및 위치 속성을 설정한 후에는 상위 요소의 제한 내에서 이동하고 벗어날 수 없기 때문에 겹치는 효과가 없습니다. 이렇게 하면 겹치지 않고 아래쪽에 가깝게 유지되지만 주의가 필요합니다.

새 중첩된 상위 요소에는 내부 요소보다 높은 고정 높이가 필요합니다. 그렇지 않으면 내부 요소로 인해 키가 늘어날 것입니다.

[추천: HTML 비디오 튜토리얼]

예:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>文字靠下</p>
</div>
</body>
</html>

로그인 후 복사

렌더링:

HTML에서 텍스트를 아래쪽으로 설정하는 방법

2. 텍스트인 경우(블록 수준 요소를 사용해본 적이 없으므로 시간이 되면 시도해 볼 수 있습니다. ). 그런 다음 표시할 텍스트를 래핑하는 div를 설정해야 합니다: table-cell + 수직: 하단. 이렇게 하면 텍스트가 div 하단에 첨부됩니다.

예:

HTML:

<div>文字在div的底部对齐</div>

로그인 후 복사

css 스타일:

div{
    width:200px;height:50px;  /*设置div的大小*/
    border:4px solid #beceeb; /*为了便于观察，显示出边框*/
    display:table-cell; 
    vertical-align:bottom;
    }

로그인 후 복사

렌더링:

HTML에서 텍스트를 아래쪽으로 설정하는 방법