HTML5의 수직 센터링 솔루션

小云云
풀어 주다: 2017-12-22 15:24:59
원래의
10096명이 탐색했습니다.

CSS에서는 margin: 0 auto;를 사용하면 수평 중앙 정렬이 가능하지만 margin: auto 0은 수직 중앙 정렬이 불가능하다는 점을 지적해야 합니다. 이번 글에서는 HTML5의 수직 센터링에 대한 상세한 해결 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

여기서 가장 큰 이유는 부모 컨트롤, 즉 컨트롤 자체의 위치가 올바르지 않기 때문입니다. 코드를 직접 보면 먼저 상위 컨트롤에 상대 레이아웃을 사용해야 하고 그런 다음 하위 컨트롤에 절대 레이아웃을 사용해야 하며 margin: auto 0;과 결합된 상단 및 하단 속성을 사용하여 다음을 달성해야 합니다. 효과.


.container-vertical {
      position: relative;
      width: 100%;
      height: 200px;
      background: deepskyblue;
      margin-bottom: 20px;
}
        
.container-vertical-item {
    position: absolute;
    width: 130px;
    height: 80px;
    text-align: center;
            background: yellow;
        line-height: 80px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
로그인 후 복사

가로 중심.png

가로 및 세로 중심

5.2의 경험을 바탕으로 하위 컨트롤의 왼쪽, 오른쪽, 위쪽, 아래쪽 속성을 0. 그리고 margin: auto; 네 방향 모두에 자동 여백이 있습니다. 이 효과를 얻을 수 있습니다. 주목해야 할 하위 컨트롤에는 display: block 속성이 있어야 합니다.

코드를 보세요


 .container-horization-vertical {
    position: relative;
    width: 100%;
    height: 200px;
    background: deepskyblue;
    margin-bottom: 20px;
}
        
.container-horization-vertical-item {
    position: absolute;
    width: 150px;
    height: 80px;
    background: yellow;
    line-height: 80px;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
로그인 후 복사

요약: 이 솔루션은 그다지 복잡하지 않은 일부 페이지 레이아웃을 해결할 때 여전히 매우 유용하며 모든 인터페이스와 거의 모든 브라우저에 적용할 수 있습니다. 그러나 매우 복잡한 페이지의 경우 다른 솔루션이 필요할 수도 있지만 이 아이디어에서 영감을 얻을 수도 있습니다.

관련 추천:

모바일 HTML5에서 가로 및 세로 화면을 판단하는 방법

html5의 위치에 대한 심층적인 이해

html5에서 알아야 할 10가지

위 내용은 HTML5의 수직 센터링 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿