HTML 요소의 가로 및 세로 가운데 맞춤을 설정하는 방법-HTML 튜토리얼-php.cn

HTML 요소의 가로 및 세로 가운데 맞춤을 설정하는 방법

php中世界最好的语言

풀어 주다： 2018-01-24 10:01:44

원래의

4763명이 탐색했습니다.

이번에는 html 요소의 가로, 세로 중심을 설정하는 방법을 보여드리겠습니다. html 요소를 가로, 세로 중심으로 설정할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

페이지를 디자인할 때 DIV를 중앙에 배치하고 로그인 창을 중앙에 배치하는 등 페이지 창을 기준으로 가로 및 세로로 표시해야 하는 경우가 많습니다.

지금까지 많은 방법이 탐색되었습니다.

HTML:

<body>  
    <div class="maxbox">  
        <div class="minbox align-center"></div>  
    </div>  
</body>

로그인 후 복사

첫 번째 유형: CSS절대 위치 지정

주로 절대 위치 지정을 사용하고 그 다음 여백을 사용하여 중간 위치로 조정합니다.

상위 요소:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

하위 요소:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

수평 및 수직 중앙 정렬:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/  
    margin-top: -100px;    /*height/-2*/  
}

로그인 후 복사

두 번째: CSS 절대 위치 지정 + Javascript/JQuery

주로 절대 위치 지정을 사용하고 Javascript/JQuery를 사용하여 조정합니다. 중간 위치. 첫 번째 방법에 비해 이 방법은 클래스의 유연성을 향상시킵니다.

상위 요소:

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

하위 요소:

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

로그인 후 복사

수평 및 수직 중앙 정렬:

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}

로그인 후 복사

JQuery:

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});

로그인 후 복사

여러 방법의 비교:

첫 번째 CSS 절대 위치 여백 조정, 호환성은 좋지만 유연성이 부족함 . 가로, 세로 가운데 정렬해야 하는 상자가 많은 경우 너비와 높이가 다르기 때문에 .align-center 를 다르게 작성해야 합니다.
두 번째는 스크립팅 언어를 사용하는데, 이는 호환성이 좋고 첫 번째의 단점을 보완합니다. 수평 및 수직 센터링 효과는 너비와 높이의 변화에 영향을 받지 않습니다.
세 번째는 CSS3의 몇 가지 새로운 속성을 사용하며 IE10, Chrome, Firefox 및 Opera와 호환됩니다. 호환성이 그다지 좋지 않으며 가로 및 세로 센터링 효과가 너비와 높이의 변화에 영향을 받지 않습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!