레이아웃에 관련된 모든 사람은 조만간 요소를 수직으로 정렬해야 하는 필요성에 직면하게 되며... 요소를 중앙에 정렬할 때 어떤 어려움이 발생할 수 있는지 알고 있습니다. CSS에는 논리적으로 수행해야 하는 여러 값이 있는 'vertical-align' 속성이 있습니다. 수직 정렬. 그러나 실제로는 예상대로 작동하지 않습니다.

이 문제를 해결하기 위한 몇 가지 기술이 있습니다. 아래에서 각각에 대해 자세히 살펴보겠습니다.

1. 테이블과의 정렬

이 경우 외부 블록을 단일 셀 테이블로 교체합니다. 정렬은 셀의 내용, 즉 내부 블록에 적용됩니다.

HTML

CSS

외부 ( 너비 : 200px ; 높이 : 200px ; text-align : center ; vertical-align : middle ; background-color : #ffc ; )

주요 단점 이 결정, 의미론의 관점에서 - 테이블의 사용은 의도된 목적이 아닙니다. 두 번째 단점은 테이블을 만들려면 주변에 하나 이상의 요소를 추가해야 한다는 것입니다. 실외기.

첫 번째 부정은 테이블 태그를 div로 바꾸고 CSS에서 테이블 표시 모드를 설정하여 부분적으로 취소할 수 있습니다.

HTML

CSS

외부 래퍼 ( 디스플레이 : 테이블 ; ) .outer ( 디스플레이 : 테이블 셀 ; )

2. 패딩 정렬

내부 및 외부 블록의 높이를 알고 있는 경우 (H 외부 - H 내부) / 2 공식을 사용하여 내부 블록의 수직 들여쓰기를 사용하여 정렬을 설정할 수 있습니다.

CSS

외부 ( 높이 : 200px ; ) .inner ( 높이 : 100px ; 여백 : 50px 0 ; )

솔루션의 단점은 두 블록의 높이에 대한 의무적인 지식입니다.

3. 라인 높이에 따른 정렬

내부 블록이 한 줄 이상의 텍스트를 차지하지 않는 경우 line-height 속성을 사용하여 외부 블록의 높이와 동일하게 설정할 수 있습니다. 내부 블록의 내용은 두 번째 줄로 이동해서는 안 되므로 white-space: nowrap 및 overflow: hidden 규칙도 추가하는 것이 좋습니다.

CSS

외부 ( 높이 : 200px ; 라인 높이 : 200px ; ) .inner ( 공백 : nowrap ; 오버플로 : 숨김 ; )

이 방법을 사용하여 정렬할 수도 있습니다. 여러 줄 문자. 이렇게 하려면 내부 블록이 line-height 값을 재정의하고 display: inline-block 및 vertical-align: middle 규칙을 추가해야 합니다.

CSS

외부 ( 높이 : 200px ; 라인 높이 : 200px ; ) .inner ( 라인 높이 : 일반 ; 디스플레이 : 인라인 블록 ; 수직 정렬 : 중간 ; )

이 방법의 단점은 외부 블록의 높이를 알아야 한다는 것입니다.

4. "스트레치"와 정렬

이 방법은 내부 블록의 높이를 알고 있지만 외부 블록의 높이를 알 수 없을 때 사용할 수 있습니다.

신청하려면 이 방법다음이 필요합니다.

  • 외부 블록을 position: relative 로 설정하고 내부 블록을 절대 position: absolute 로 설정합니다.
  • 일부 top: 0 및 bottom: 0 규칙을 내부 블록에 추가합니다. 그 결과 외부 블록의 전체 높이로 늘어납니다.
  • 내부 블록의 수직 패딩을 auto 로 설정합니다.

CSS

외부 ( 위치 : 상대 ; ) . 내부 ( 높이 : 100px ; 위치 : 절대 ; 상단 : 0 ; 하단 : 0 ; 여백 : 자동 0 ; )

5. 음수 margin-top 정렬

앞의 방법과 유사하게 이 방법은 바깥쪽 블록의 높이를 알 수 없지만 안쪽 블록의 높이를 알 때 사용합니다.

외부 블록을 상대 위치로 설정하고 내부 블록을 절대 위치로 설정해야 합니다. 그런 다음 내부 상자를 외부 상자 상단 높이의 절반으로 아래로 이동하고: 50% 자체 높이의 절반으로 이동합니다. margin-top: -H 안의 / 2 .

CSS

외부 ( 위치 : 상대 ; ) . 내부 ( 높이 : 100px ; 위치 : 절대 ; 상단 : 50% ; 마진 상단 : -50px ; )

마이너스 이 방법- 실내기의 높이를 알아야 합니다.

6. 변환과의 정렬

이 방법은 실내기의 높이를 알 수 없을 때 사용할 수 있습니다. 내부 상자를 외부 상자 상단 높이의 절반(50%) 아래로 이동한 다음 transform 속성을 사용하고 translateY(-50%) 함수로 다시 들어올려야 합니다.

CSS

외부 ( 위치 : 상대 ; ) . 내부 ( 위치 : 절대 ; 상단 : 50% ; 변환 : translateY (-50% ); )

7. 유사 요소와의 정렬

이것은 두 블록의 높이를 알 수 없을 때 사용할 수 있는 가장 다재다능한 방법입니다.

방법의 본질은 외부 블록 내부에 높이 100%의 인라인 블록을 추가하고 수직 정렬로 설정하는 것입니다. 따라서 추가된 블록의 높이는 외부 블록의 높이와 같습니다. 내부 블록은 추가된 블록에 대해 수직으로 정렬되므로 외부 블록이 됩니다.

의미를 위반하지 않기 위해 의사 요소 앞 또는 뒤에 사용하여 인라인 블록을 추가하는 것이 바람직합니다.

CSS

Outer :before ( display : inline-block ; height : 100% , vertical-align : middle , content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )

이 방법의 단점은 실내기의 절대 위치 지정과 함께 사용할 수 없다는 것입니다.

8. Flexbox와의 정렬

수직으로 정렬하는 가장 현대적인 방법은 Flexible Box Layout(또는 축약형 플렉스박스). 페이지에서 요소의 위치를 ​​유연하게 제어하여 거의 모든 위치에 배치할 수 있습니다. Flexbox의 중심 정렬은 매우 간단한 작업입니다.

  • CSS,
  • HTML

    • 레이아웃을 다루셨던 많은 분들이 요소를 수직으로 정렬해야 하는 필요성에 직면했고 요소를 중앙에 정렬할 때 어떤 어려움이 발생하는지 알고 있을 것입니다.

    예, CSS의 수직 정렬을 위해 많은 값을 가진 특별한 vertical-align 속성이 있습니다. 그러나 실제로는 예상대로 작동하지 않습니다. 이것을 알아 내려고 노력합시다.


    다음 접근 방식을 비교해 보겠습니다. 다음과 정렬:

    • 테이블,
    • 들여 쓰기,
    • 줄 높이 ,
    • 스트레칭,
    • 마이너스 마진,
    • 변형,
    • 의사 요소
    • 플렉스박스.
    예를 들어 다음 예를 고려하십시오.

    두 개의 div 요소가 있으며 하나는 다른 요소 안에 중첩되어 있습니다. 그들에게 적절한 클래스(outer 및 inner)를 제공합시다.


    목표는 내부 요소를 외부 요소의 중심에 맞추는 것입니다.

    우선, 외부 및 내부 블록의 크기가 다음과 같은 경우를 고려하십시오. 모두 다 아는. display: inline-block을 내부 요소에 추가하고 text-align: center 및 vertical-align: middle을 외부 요소에 추가합시다.

    정렬은 인라인 또는 인라인 블록 표시 모드가 있는 요소에만 적용됩니다.

    블록의 크기와 테두리를 보기 위한 배경색을 설정해 보겠습니다.

    외부 ( 너비: 200px; 높이: 200px; 텍스트 정렬: 센터; 수직 정렬: 중간; 배경색: #ffc; ) .inner ( 디스플레이: 인라인 블록; 너비: 100px; 높이: 100px; 배경색 : #fcc; )
    스타일을 적용하면 내부 블록이 수평으로 정렬되지만 수직으로 정렬되지 않는 것을 볼 수 있습니다.
    http://jsfiddle.net/c1bgfffq/

    왜 그런 일이 일어났습니까?사실은 vertical-align 속성이 정렬에 영향을 미친다는 것입니다. 내용이 아닌 요소 자체(테이블 셀에 적용되는 경우 제외). 따라서 이 속성을 적용하면 외부 요소아무것도 주지 않았다. 게다가 이 속성을 내부 요소에 적용하면 인라인 블록이 인접 블록과 수직으로 정렬되고 우리의 경우에는 하나의 인라인 블록이 있기 때문에 아무 일도 하지 않습니다.

    이 문제를 해결하기 위한 몇 가지 기술이 있습니다. 아래에서 각각에 대해 자세히 살펴보겠습니다.

    테이블과의 정렬

    가장 먼저 떠오르는 해결책은 외부 블록을 단일 셀 테이블로 바꾸는 것입니다. 이 경우 정렬은 셀의 내용, 즉 내부 블록에 적용됩니다.


    http://jsfiddle.net/c1bgfffq/1/

    이 솔루션의 명백한 단점은 의미론의 관점에서 정렬을 위해 테이블을 사용하는 것이 잘못되었다는 것입니다. 두 번째 단점은 테이블을 생성하려면 외부 블록 주위에 요소를 하나 더 추가해야 한다는 것입니다.

    첫 번째 빼기는 table 및 td 태그를 div로 바꾸고 CSS에서 테이블 표시 모드를 설정하여 부분적으로 제거할 수 있습니다.


    .outer-wrapper ( 디스플레이: 테이블; ) .outer ( 디스플레이: 테이블-셀; )
    그럼에도 불구하고 외부 블록은 여전히 ​​​​모든 후속 결과와 함께 테이블로 남아 있습니다.

    패딩과의 정렬

    내부 및 외부 블록의 높이를 알고 있는 경우 (H 외부 - H 내부) / 2 공식을 사용하여 내부 블록의 수직 패딩을 사용하여 정렬을 설정할 수 있습니다.

    외부 ( 높이: 200px; ) .inner ( 높이: 100px; 여백: 50px 0; )
    http://jsfiddle.net/c1bgfffq/6/

    이 솔루션의 단점은 두 블록의 높이를 알고 있는 제한된 수의 경우에만 적용할 수 있다는 것입니다.

    줄 높이 정렬

    내부 블록이 한 줄 이상의 텍스트를 차지하지 않아야 한다는 것을 알고 있다면 line-height 속성을 사용하고 외부 블록의 높이와 동일하게 설정할 수 있습니다. 내부 블록의 내용이 두 번째 줄로 줄바꿈되지 않아야 하므로 white-space: nowrap 및 overflow: hidden 규칙도 추가하는 것이 좋습니다.

    외부 ( 높이: 200px; 라인 높이: 200px; ) .inner ( 공백: nowrap; 오버플로: 숨김; )
    http://jsfiddle.net/c1bgfffq/12/

    이 기술은 내부 블록의 line-height 값을 재정의하고 display: inline-block 및 vertical-align: middle 규칙을 추가하는 경우 여러 줄 텍스트를 정렬하는 데 사용할 수도 있습니다.

    외부 ( 높이: 200px; 라인-높이: 200px; ) .inner ( 라인-높이: 일반; 디스플레이: 인라인 블록; 수직 정렬: 중간; )
    http://jsfiddle.net/c1bgfffq/15/

    이 방법의 단점은 외부 블록의 높이를 알아야 한다는 것입니다.

    늘이기 정렬

    이 방법은 외부 블록의 높이를 알 수 없지만 내부 블록의 높이를 알고 있는 경우에 사용할 수 있습니다.

    이를 위해서는 다음이 필요합니다.

    1. 상대 위치를 외부 블록으로 설정하고 절대 위치를 내부 블록으로 설정합니다.
    2. 규칙을 top: 0 및 bottom: 0을 내부 블록에 추가하면 외부 블록의 전체 높이까지 늘어납니다.
    3. 내부 블록의 수직 패딩 값을 auto로 설정합니다.
    .outer ( 위치: 상대; ) .inner ( 높이: 100px; 위치: 절대; 상단: 0; 하단: 0; 여백: 자동 0; )
    http://jsfiddle.net/c1bgfffq/4/

    이 기술의 핵심은 늘이고 절대 위치에 있는 블록의 높이를 설정하면 해당 값이 auto 로 설정된 경우 브라우저가 동일한 비율로 세로 패딩을 계산하게 한다는 것입니다.

    음수 margin-top 정렬

    이 방법은 널리 알려졌고 매우 자주 사용됩니다. 앞의 것과 마찬가지로 외부 블록의 높이를 알 수 없으나 내부 블록의 높이를 알 때 적용된다.

    외부 블록을 상대 위치로 설정하고 내부 블록을 절대 위치로 설정해야 합니다. 그런 다음 내부 상자를 외부 상자 상단 높이의 절반(50%) 아래로 이동하고 자체 높이의 절반으로 이동해야 합니다. margin-top: -H inner / 2.

    외부( 위치: 상대; ) .내부( 높이: 100px; 위치: 절대; 상단: 50%; 마진 상단: -50px; )
    http://jsfiddle.net/c1bgfffq/13/

    이 방법의 단점은 실내기의 높이를 알아야 한다는 것입니다.

    변형과의 정렬

    이 방법은 앞의 방법과 유사하나 내부 블록의 높이를 알 수 없는 경우에 적용할 수 있다. 이 경우 픽셀 단위로 음수 패딩을 설정하는 대신 transform 속성을 사용하고 translateY 함수와 -50% 값으로 내부 상자를 들어올릴 수 있습니다.

    외부( 위치: 상대; ) .내부( 위치: 절대; 상단: 50%; 변환: translateY(-50%); )
    http://jsfiddle.net/c1bgfffq/9/

    이전 방법에서 값을 백분율로 설정할 수 없었던 이유는 무엇입니까? 여백 속성의 백분율 값은 다음을 기준으로 계산되기 때문에 부모 요소, 값 50%는 외부 상자 높이의 절반이 되며 내부 상자를 자체 높이의 절반으로 올려야 합니다. 이것이 바로 transform 속성의 용도입니다.

    이 방법의 단점은 실내기에 절대 위치.

    Flexbox와의 정렬

    대부분 현대적인 방법수직 정렬은 Flexible Box Layout(일반적으로 Flexbox로 알려짐)을 사용하는 것입니다. 이 모듈페이지에서 요소의 위치를 ​​유연하게 제어하여 거의 모든 위치에 배치할 수 있습니다. Flexbox의 중심 정렬은 매우 간단한 작업입니다.

    외부 블록은 display: flex 로 설정해야 하고 내부 블록은 margin: auto 로 설정해야 합니다. 그리고 그게 다야! 아름답죠?

    외부 ( 디스플레이: 플렉스; 너비: 200px; 높이: 200px; ) .inner ( 너비: 100px; 여백: 자동; )
    http://jsfiddle.net/c1bgfffq/14/

    이 방법의 단점은 Flexbox가 최신 브라우저에서만 지원된다는 것입니다.

    어떤 방법을 선택할 것인가?

    문제 진술에서 진행해야합니다.
    • 텍스트의 수직 정렬을 위해서는 수직 패딩이나 line-height 속성을 사용하는 것이 좋습니다.
    • 높이가 알려진 절대 위치 요소(예: 아이콘)에 이상적 맞는 방법음수 margin-top 속성이 있습니다.
    • 블록의 높이를 알 수 없는 더 복잡한 경우에는 의사 요소 또는 변형 속성을 사용해야 합니다.
    • 글쎄, 당신이 IE의 이전 버전을 지원할 필요가 없을 만큼 충분히 운이 좋다면, 물론 Flexbox가 더 좋습니다.

    레이아웃을 할 때 블록의 텍스트를 세로로 정렬해야 하는 경우가 종종 있습니다. 이것이 테이블 셀에서 수행되어야 하는 경우 vertical-align CSS 속성의 값이 설정됩니다.

    그러나 합리적인 질문이 생깁니다. 불필요한 태그로 페이지 마크 업을 오버로드하지 않고 테이블없이 할 수 있습니까? 대답은 "할 수 있습니다"이지만 MSIE의 CSS 지원이 좋지 않기 때문에 문제에 대한 솔루션은 다른 일반 브라우저의 솔루션과 다릅니다.

    예를 들어 다음 스니펫을 고려하십시오.



    일부 텍스트

    텍스트를 상자 중앙과 상자 아래쪽에 수직으로 정렬하십시오.

    문제의 해결책

    "적절한" 브라우저(MSIE 포함

    다수 최신 브라우저 CSS2.1, 즉 display 속성에 대한 table-cell 값을 지원합니다. 이렇게 하면 텍스트가 있는 블록을 테이블 셀로 표시하고 이를 사용하여 텍스트를 세로로 정렬할 수 있습니다.

    div(
    디스플레이:테이블 셀;
    수직 정렬: 중간;
    }

    div(
    디스플레이:테이블 셀;
    수직 정렬: 하단;
    }

    Internet Explorer(최대 버전 7 포함)

    MSIE에서 텍스트를 블록 맨 아래에 정렬하는 문제를 해결하려면 절대 위치 지정을 사용할 수 있습니다(여기서 블록에 중첩된 인라인 요소가 필요함).

    div(
    위치: 상대;
    }
    div 범위(
    디스플레이:블록;
    위치: 절대;
    하단: 0%;
    왼쪽: 0%
    폭: 100%
    }

    이 규칙 집합은 "올바른" 브라우저에서도 작동합니다.

    속성 지정

    div 범위(
    디스플레이:블록;
    폭: 100%
    }

    필수는 아니지만 세로 텍스트 정렬 외에 가로 텍스트 정렬을 사용하려는 경우 필요할 수 있습니다(예: text-align: center ;).

    텍스트를 블록 중앙에 세로로 정렬하려면 원본 조각이 여전히 복잡해야 합니다. 인라인 요소를 하나 더 소개하겠습니다.

    연구 자료:

    • CSS의 수직 센터링(www.jakpsatweb.cz/css/css-vertical-center-solution.html)
    • CSS를 사용한 수직 센터링 (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
    • 수직 정렬(www.cssplay.co.uk/ie/valign.html)
    • vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
    • CSS에서 수직으로 정렬하는 또 다른 방법(cssing.org.ua/2007/04/26/another-css-valign-method)

    CSS에서 요소를 세로로 중앙에 배치하는 문제에는 이미 만들어진 여러 솔루션이 있습니다. 각각에 대한 정렬 방법 선택 별도의 케이스요소의 유형, 크기, 위치 및 요소에 의해 지정된 기타 속성에 따라 다릅니다.

    다음은 레이아웃 디자이너에게 인기 있는 수직 정렬 기술입니다. 작동 방식과 각각의 경우가 가장 적합함을 보여줍니다.

    다음은 두 개의 div 요소입니다.



    각각의 방법은 실내기를 실외기의 중앙에 맞추는 데 사용됩니다.

    한 줄에 대한 줄 높이

    부모가 한 줄의 텍스트에 걸쳐 있고 자식의 높이를 알면 line-height 속성을 적용할 수 있습니다. 속성 값은 외부 상자의 높이와 같아야 합니다. 이것은 한 줄에서만 작동하므로 줄 바꿈을 방지하기 위해 아이가 overflow: hidden 및 white-space: nowrap을 추가하는 것이 좋습니다.

    이 경우 100%는 글꼴 높이이므로 line-height=100%를 백분율로 사용할 수 없습니다.

    컨테이너(
    높이: 300px;
    줄 높이: 300px
    }

    안의(
    공백: nowrap;
    오버플로: 숨김;
    }

    이 방법은 외부 블록의 높이를 알고 있는 경우에만 적용할 수 있습니다.

    세로 정렬이 있는 테이블

    표는 요소를 세로로 정렬하는 가장 좋은 방법입니다. 의미를 깨뜨리지 않으려면 테이블 요소를 만드는 것이 좋습니다. CSS 사용. 셀 내용의 위치는 수직 정렬로 제어됩니다. 이 속성의 네 가지 값은 테이블에서 작동합니다.

    기준선 - 기본적으로
    . 하단 - 셀 하단의 내용.
    . 중간 - 셀 중간의 내용.
    . top - 셀의 맨 위에 있는 내용입니다.

    첫 번째 예에서 외로운 테이블 셀은 외부 블록이 됩니다.

    컨테이너(
    디스플레이:테이블 셀;
    수직 정렬: 중간;
    }

    이 방법은 높이가 지정되지 않은 요소에 대해 작동하기 때문에 좋지만 경우에 따라 외부 블록이 다른 테이블 셀과 마찬가지로 내용에 맞게 너비를 조정한다는 사실로 인해 사용이 방해를 받습니다. 너비에 대한 너비를 명시적으로 지정합니다. 표가 없는 셀의 경우 백분율이 제대로 작동하지 않습니다.

    이 단점은 display:table 속성으로 부모의 셀을 래핑하여 수정됩니다. 이 요소의 크기는 백분율로 지정할 수 있습니다. 최종 코드는 다음과 같습니다.

    외부 래퍼(
    디스플레이: 테이블;
    }

    컨테이너(
    디스플레이:테이블 셀;
    수직 정렬: 중간;
    }





    위치: 절대 + 음수 마진

    이 방법은 내부 요소의 높이를 알 때 사용됩니다. 외부 블록의 경우 알 수 없습니다. 부모는 상대적 위치가 지정되고 그 안의 자식은 절대적입니다.

    top 속성 값이 50%이면 중첩된 요소가 외부 상자 중앙의 맨 위에 배치됩니다. 수직의 중심에 정확히 서도록 자체 높이의 절반만큼 음수 여백으로 높이를 유지해야 합니다.

    컨테이너(
    위치: 상대;
    }

    안의(
    높이: 140px;
    위치: 절대;
    상단: 50%;
    여백 상단: -70px;
    }

    이 방법의 단점은 아이의 키를 알아야 한다는 것입니다.

    vertical-align을 이용한 인라인 정렬

    이미지와 아이콘을 포함한 인라인 및 인라인 블록 요소를 둘러싼 텍스트의 정렬은 vertical-align 속성을 사용하여 수행됩니다. 테이블과 달리 이 경우 사양에 지정된 전체 값 세트가 작동합니다.

    부모의 높이가 주어지면 이 속성을 사용하여 여러 줄 텍스트를 가운데에 맞출 수 있습니다.

    외부 블록의 경우 한 줄의 중심이 지정됩니다.

    컨테이너(
    높이: 140px;
    줄 높이: 140px;
    }

    내부 블록의 라인 높이 값은 정상 또는 원하는 값으로 재정의됩니다. 그는 또한 정렬 vertical-align: middle 및 인라인 블록 유형으로의 변환(디스플레이: 인라인 블록)을 받습니다.

    안의(
    디스플레이: 인라인 블록
    줄 높이: 보통
    수직 정렬: 중간;
    }

    이 방법의 단점은 부모의 높이를 알아야 한다는 것입니다.

    변형과의 정렬

    transform 속성의 translateY 함수를 사용하면 알 수 없는 높이로 내부 상자를 가운데에 맞출 수 있습니다. 이렇게 하려면 부모는 상대적으로 배치되어야 하고 자식은 절대적으로 배치되어야 합니다.

    값이 50%인 top 속성은 위쪽 가장자리가 부모의 가운데에 있도록 내부 상자를 낮춥니다. translateY 값: -50%는 요소를 자체 높이의 절반만큼 올리므로 상자의 수직 중심을 정렬합니다.

    컨테이너(
    위치: 상대;
    }

    안의(
    위치: 절대;
    상단: 50%;
    변환: translateY(-50%);
    }

    수신의 단점은 IE 브라우저에서 변환 기능을 제한적으로 지원한다는 것입니다.

    의사 요소를 통한 정렬

    이 방법은 첫 번째 또는 두 번째 블록의 높이를 알 수 없을 때 작동합니다. 인라인 의사 요소 inline-block은 before 또는 after를 사용하여 부모 내부에 추가됩니다. 추가된 요소의 높이는 상위 요소의 높이와 같아야 합니다. height: 100%. 콘텐츠의 수직 정렬은 vertical-align: middle으로 설정됩니다.

    수직 정렬: 가운데는 이 의사 요소를 기준으로 내부 블록을 정렬합니다. 부모와 자식의 높이가 같기 때문에 내부 요소는 의사 요소와 수직으로 정렬되지만 외부 상자도 가운데에 맞춰집니다.

    컨테이너: 전에(
    콘텐츠: "";
    높이: 100%;
    수직 정렬: 중간;
    디스플레이: 인라인 블록
    }

    안의(
    디스플레이: 인라인 블록
    수직 정렬: 중간;
    }

    보편적인 방법. 내부 블록이 절대 위치 지정으로 설정된 경우 작동하지 않습니다.

    플렉스박스

    요소를 수직으로 정렬하는 가장 쉽고 새로운 방법입니다. Flexbox를 사용하면 웹 페이지의 요소를 원하는 방식으로 정렬할 수 있습니다. 블록을 가운데에 맞추려면 부모를 display: flex로, 자식을 margin: auto로 설정하면 됩니다.

    컨테이너(
    디스플레이:플렉스;
    너비: 320px
    높이: 140px;
    }

    안의(
    너비: 120px
    여백: 자동;
    }

    Flexbox는 최신 브라우저에서만 작동합니다.

    방법 선택

    사용할 수직 정렬 기술은 특정 경우에 나타날 수 있는 작업 및 제한 사항에 따라 다릅니다.

    요소의 높이를 알 수 없음

    이 경우 다음 네 가지 보편적인 방법 중 하나를 사용할 수 있습니다.

    1. 표. 부모는 HTML 또는 display-table/display-cell을 통해 생성된 테이블 셀입니다. 이 부모 요소에는 vertical-align: middle이 지정됩니다.

    2. 의사 요소. 외부 블록의 경우 너비=100% 및 vertical-align: middle로 인라인 블록 의사 요소가 생성됩니다. 자식에게 display: inline-block 및 vertical-align: middle이 제공됩니다. 이 방법은 내부 블록에 절대 위치 지정이 지정된 경우에만 작동하지 않습니다.

    3. 변형. 부모는 위치: 상대를 얻습니다. 자식에게 position: absolute, top: 50% 및 transform: translateY(-50%);

    4 플렉스박스. 외부 블록은 display: flex로 설정되고 내부 블록은 margin: auto로 설정됩니다.

    아이의 키만 알 수 있다

    외부 블록은 상대적으로 배치됩니다. 내부 요소에는 절대 위치 지정, top: 50% 및 높이의 절반과 같은 margin-top이 지정됩니다.

    높이를 알고 있는 블록당 한 줄

    외부 상자는 높이와 동일한 값으로 line-height 속성으로 설정됩니다.

    외부 블록의 높이는 알려져 있지만 내부 요소는 알려져 있지 않습니다.

    부모는 그 높이와 같은 line-height를 받습니다. 자식의 line-height는 normal 또는 원하는 값으로 재정의되고 display: inline-block 및 vertical-align: middle이 제공됩니다.

    사이트나 페이지와 같은 다양한 요소의 정렬은 처음에는 누군가를 위해 진행됩니다. 어려운 과업텍스트의 수직 정렬을 스윙합니다. 아이러니하게도 그 중 가장 어려운 길 CSS 사용콘텐츠 센터링입니다. 콘텐츠를 수평으로 중앙에 맞추는 것은 어떤 시점에서는 비교적 쉽습니다. 콘텐츠를 세로로 중앙에 배치하는 것은 거의 항상 어렵습니다. 센터링 다양한 요소, CSS와 수직으로 정렬되어야 합니다. 이것은 확실히 디자이너와 웹마스터에게 문제를 일으키는 매우 자주 묻는 질문입니다. 그러나 수직 센터링을 수행하는 방법에는 여러 가지가 있으며 각각 사용하기가 매우 쉽습니다.

    시도해 본 적이 있다면 특히 테이블 사용을 피하려는 경우 까다롭습니다. 운 좋게도 도움을 요청하는 우리의 외침이 들렸고 이 문제를 해결하기 위해 CSS 무기고에 추가된 새로운 무기 중 하나는 플렉스 상자 레이아웃으로 알려진 레이아웃 유형입니다. 잠시 후 알게 되겠지만 복잡한 레이아웃을 단순화하는 몇 가지 정말 훌륭한 기능을 제공합니다. 이 훌륭한 기능 중 일부를 사용하면 콘텐츠를 세로 및 가로 중앙에 배치할 수도 있습니다. 이 내용은 이 튜토리얼에서 다룰 것입니다. 어느 정도 패딩을 사용하여 이 작업을 수행할 수 있지만 레이아웃이 더 작은 화면으로 표시될 수 있습니다. 스타일시트에 사용자 정의 CSS 클래스를 추가하면 몇 초 만에 콘텐츠를 세로로 가운데에 둘 수 있습니다.

    수평 정렬단락의 왼쪽과 오른쪽 가장자리가 왼쪽과 오른쪽 가장자리 사이에 어떻게 일치하는지 결정 텍스트 필드. 수직 정렬은 텍스트 필드에서 문자의 수직 위치를 결정합니다. 결석 좋은 방법 CSS의 수직 중심 요소는 전체 존재에 대한 평판의 어두운 결함이었습니다.

    라인 높이가 있는 첫 번째 방법

    첫 번째 방법은 간단하고 다소 진부하여 적용에 한계가 있다는 단점이 있다. 사이트의 html 페이지를 인코딩할 때 텍스트 콘텐츠의 줄 간격은 일반적으로 기본값으로 남겨지는 속성 중 하나일 것입니다. 일반적으로 라인 자체의 높이를 설정해야 하며, 이는 사용되는 블록과 비슷한 높이로 제공됩니다. 줄 높이 재산.


    이것은 데모에 표시된 첫 번째 방법입니다.



    CSS

    Constutesim_first(
    테두리: 2px 솔리드 #bf1515;
    높이: 175px;
    }
    .constutesim_first > p(
    라인 높이:175px;
    여백:0;
    텍스트 정렬:가운데;
    패딩: 0;
    글꼴 크기: 17px;
    색상: #3152a0;
    글꼴 패밀리: Tahoma;
    글꼴 두께: 굵게;
    }


    또한 모든 것이 실제로 어떻게 보일지 즉시 볼 수 있습니다.

    비슷한 방식으로 중앙에 무조건 수직이 되는 이미지를 설정하는 방법을 구현할 수 있습니다. 여기에서는 vertical-align: middle; 속성 하나만 등록하면 됩니다. 이미지를 표시하는 역할을 합니다.


    .png">이미지와 함께 제공되는 두 번째 변형


    CSS

    두 번째 변형(
    테두리: 2px 단색 빨간색;
    라인 높이: 158px;
    }

    두 번째 변형 div(
    텍스트 정렬:가운데;
    }
    .두 번째 변형 img(
    수직 정렬: 중간;
    테두리: 0px 솔리드 #3a3838;
    }


    중앙과 수직으로 이미지 스냅샷을 구현합니다.

    position 속성과의 정렬

    이것은 아마도 가장 잘 알려진 방법이지만 CSS 사용. 그러나 여기에는 이상적이지 않으며 이 방법도 요소의 중심과 관련된 자체적인 작은 뉘앙스가 있다는 점을 추가해야 합니다. 즉, 백분율로 설정하면 요소의 왼쪽에 중심이 맞춰집니다. 상단, 블로그 자체 내부.




    CSS

    경쟁자 옵션(
    테두리: 2px 솔리드 #d40e0e;
    높이: 162px;
    위치: 상대;
    }
    .competaird-옵션 div(
    위치: 절대;
    상단: 50%;
    왼쪽: 50%
    높이: 28%;
    폭: 49%
    마진: -2% 0 0 -25%;
    테두리: 2px 솔리드 #4a4848;
    }


    줄 간격 또는 줄 높이는 렌더링된 텍스트 줄 사이의 세로 높이입니다. HTML 페이지. 거의 항상 이 거리 값은 브라우저나 렌더링 엔진에 의해 적절한 값으로 설정됩니다. 이 값은 일반적으로 표시되는 페이지의 글꼴 및 기타 요인에 따라 다릅니다.

    테이블 속성과의 정렬

    이 방법에서는 검증된 오래된 방법, 여기서 요소를 셀이 있는 테이블로 다시 만듭니다. table이라는 태그는 여기서는 사용하지 않을 것이며 여기서는 완전히 다르게 설정하겠습니다. CSS 속성, 디스플레이: 테이블;, 디스플레이: 테이블-셀;입니다. 가장 오래된 버전의 IE에 대해 이야기하면 데이터가 여기에 표시되지 않습니다. 브라우저가 더 이상 관련이 없고 거의 모든 것이 올바르게 표시되지 않기 때문에 브라우저를 업데이트하셨기를 바랍니다.

    Cherevert 변형(
    테두리: 2px 솔리드 #c30b0b;
    높이: 173px;
    디스플레이: 테이블;
    폭: 100%
    글꼴 크기: 17px;
    글꼴 두께: 굵게;
    색상: #3945a0;
    }

    Cherevert 변형 div(
    디스플레이:테이블 셀;
    수직 정렬: 중간;
    텍스트 정렬:가운데;
    }


    우선, 대부분의 브라우저에서 사용되는 기본값이 무엇인지 봅시다. 대부분의 최신 주간 브라우저에서 줄 간격.

    flex 속성과의 정렬

    여기에서 인터넷 리소스의 레이아웃에서 거의 찾을 수 없는 고유한 속성이 있는 보다 독창적인 버전이 있습니다. 그러나 여전히 사용되며 어떤 경우에는 유용합니다. 이것은 기본 축을 설정하므로 방향성 플렉스 항목의 정의가 플로피 컨테이너에 배치됩니다.


    flex 속성과의 정렬


    CSS

    변형-가로(
    테두리: 2px 솔리드 #d20c0c;
    높이: 147px;
    디스플레이:플렉스;
    항목 정렬: 가운데;
    정당화-내용: 중앙;
    글꼴 크기: 18px;
    글꼴 두께: 굵게;
    색상: #49518c;
    }


    CSS에서 다른 크기를 숫자, 픽셀 크기 또는 백분율로 지정하는 것처럼 line-height 값을 지정할 수 있습니다.

    변형 속성과의 정렬

    이제 우리는 가장 극단적인 방법에 도달했지만 그의 웹 디자인을 사용하는 최신 응용 프로그램은 아닙니다. 여기에서는 모든 것이 간단합니다. 수직으로 움직여야 합니다. 주어진 요소당신이 필요로하는 가치. 재산 변환, 패키지를 설치할 때 설치 프로그램이 적용하는 변환 목록입니다. setter는 속성에 지정된 것과 동일한 순서로 변환을 적용합니다.


    변형 속성과의 정렬


    CSS

    수직-메딜파수드사(
    테두리: 2px 솔리드 #e00a0a;
    높이: 158px;
    글꼴 크기: 19px;
    글꼴 두께: 굵게;
    색상: #353c71;
    }
    .vertical-medilpasudsa > div(
    위치: 상대;
    상단: 50%;
    변환: translateY(-50%);
    텍스트 정렬:가운데;
    }


    값을 숫자로 제공하면 현재 글꼴 크기를 기준으로 합니다. 현재 글꼴 크기에 줄 높이 또는 줄 사이의 간격을 계산하기 위해 지정한 숫자를 곱합니다.

    요소에서 문자를 가로로 가운데에 맞추려면 text-align: center를 사용해야 합니다. 한 가지 옵션은 세로로 가운데에 놓고 고정 머리글 바닥글과 한 줄의 텍스트가 있는 경우 줄 높이를 바닥글 높이와 동일하게 설정하는 것입니다.

    div, 헤더 또는 단락과 같은 요소 내부에 텍스트를 중앙에 배치해야 하는 경우 다음을 사용할 수 있습니다. 텍스트 정렬 속성 CSS.

    텍스트 정렬에는 몇 가지 유효한 속성이 있습니다.

    센터:질감이 중앙에 있습니다.
    왼쪽:컨테이너의 왼쪽에 정렬됩니다.
    오른쪽:컨테이너의 오른쪽에 정렬
    신이 옳다고 하다:극단적 인 선을 제외하고 컨테이너의 왼쪽 및 오른쪽 가장자리에 강제로 정렬됩니다.
    모두 정당화:가장 바깥쪽 문자열이 문자를 정렬하도록 합니다.
    시작:방향이 왼쪽에서 오른쪽인 경우에만 왼쪽과 동일합니다. 그러나 처음에 오른쪽에서 왼쪽으로 발생하는 텍스트 방향의 방향을 설정하면 정확할 것입니다.
    끝:시작의 반대;
    일치하는 부모:상속과 유사하지만 시작과 끝을 제외하고 부모 요소에 상대적입니다.

    이러한 속성을 사용하여 부모 또는 래퍼 div 내에서 텍스트를 정렬합니다. 요소에서 텍스트를 가로로 가운데에 맞추려면 text-align: center를 사용해야 합니다.

    한 가지 옵션은 머리글 바닥글이 고정되어 있고 텍스트 행이 하나인 경우 세로로 가운데에 맞추려면 줄 높이를 바닥글 높이와 동일하게 설정하는 것입니다.