집 > 기사 > 웹 프론트엔드 > HTML5의 수직 센터링 솔루션

HTML5의 수직 센터링 솔루션

小云云원래의: 2017-12-22 15:24:5910043검색

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의 수직 센터링 솔루션

관련 기사