>  기사  >  웹 프론트엔드  >  html body 태그의 centering 속성을 알고 계십니까? html body 태그 정의 및 사용법

html body 태그의 centering 속성을 알고 계십니까? html body 태그 정의 및 사용법

寻∝梦
寻∝梦원래의
2018-08-20 14:14:1725381검색

html body 태그의 centering 속성을 아시나요? html body 태그의 정의와 사용법. 다음 글에서는 html body 태그와 centering 속성을 정의하는 두 가지 방법을 주로 설명하고 html body 태그의 정의와 사용법을 소개합니다

html body 태그의 정의와 사용법:

body 요소는 문서의 본문을 정의합니다.

body 요소에는 문서의 모든 콘텐츠(예: 텍스트, 하이퍼링크, 이미지, 표, 목록 등)가 포함됩니다.

HTML 6c04bd5ca3fcae76e30b72ad730ca86d 태그 예

가장 기본적인 필수 요소가 포함된 간단한 HTML 문서 요소:

<html>
<head>
  <title>文档的标题</title>
</head>
<body>
  文档的内容... ...
</body>
</html>

html body 태그의 centering 속성

html body 태그의 centering 속성 (1):

기본 센터링 사용 방법:

<html>
<head>
<title>居中</title>
</head>
<body style="text-align:center;">
<h2>居中</h2>
</body>
</html>

html body의 centering 속성 태그 (2):

div 태그를 본문에서 가로, 세로로 가운데 맞추는 방법:

가로 가운데 맞춤: div 태그를 본문 전체에서 가운데 ​​맞추는 방법은 CSS, body{text-align:center로 제어할 수 있습니다. ;} .box{margin: 0 auto ;} 상자 유형은 본문 전체에서 가로 중심에 있습니다.

세로 중심: 본문에 있는 div의 세로 중심은 CSS에서는 그다지 효과적이지 않으므로 js를 사용하는 것이 더 효과적입니다. 코드는 다음과 같습니다(jQuery):

function SetPostion(){
        var wheight = $(window).height();    //浏览器的高度
        var boxheight = $(“.box”).height();     //box的高度
         //浏览器的高度若大于box的高度,才设置box垂直居中
       if(wheight > boxheight){            
             var h = (wheight -boxheight)/2;         //计算box距顶端的距离
            $(“.box”).css(“margin-top” ,h+”px”)   //设置box的margin-top属性
         }
}

Name 상자의 CSS 클래스는 수직 중앙에 있습니다.

브라우저 지원

모든 주요 브라우저는 6c04bd5ca3fcae76e30b72ad730ca86d

【관련 추천】

HTML del 태그는 블록 수준 요소인가요? html del 태그의 구체적인 적용 방법

html hr 태그의 속성은 무엇인가요? HTML hr 태그 스타일에 대한 자세한 설명

위 내용은 html body 태그의 centering 속성을 알고 계십니까? html body 태그 정의 및 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.