콘텐츠를 수직 정렬하는 6 가지 CSS 트릭
CSS에서 수직 정렬에 대해 이야기하거나보다 정확하게 어떻게 할 수 있는지에 대해 이야기 해 봅시다. CSS는 콘테이너 안에 수직으로 콘텐츠를 집중화하는 공식적인 방법을 아직 제공하지 못했습니다. 아마도 웹 개발자를 도처에 좌절시킨 문제 일 것입니다. 하지만 두려워하지 말고,이 게시물에서 우리는 당신을 도울 수있는 몇 가지 트릭을 효과를 모방하다.
그러나 이러한 트릭에는 한계가있을 수 있으며 둘 이상의 트릭을 사용하다 환상을 완료하기 위해. 다른 속임수를 알고 있다면 의견에 알려주십시오..
1. 절대 위치 지정 사용
여기에서 볼 수있는 첫 번째 트릭은 먼저 container 요소의 위치를 relative로 설정 한 다음 하위 요소 위치를 수직으로 정렬하려면 상단에서 컨테이너 높이의 절반만큼 하위 요소 위치를 이동하고 하위 요소 폭의 절반으로 위로 당깁니다. 출력은 다음과 같습니다. 이 트릭은 자식 엘리먼트가 하나 밖에 없을 때 완벽하다. CSS3 변환 콘텐츠를 중앙에 쉽게 배치 할 수 있습니다. CSS3 변환과 달리 앞의 메소드와 동일한 HTML 구조 (하나의 부모, 하나의 자식 요소)가 있다고 가정합니다. - CSS3 변환은 Internet Explorer 8 이하에서는 작동하지 않지만 계속 기억하십시오. 다른 방법으로 대체 할 수 있습니다.. 우리는 또한 이 트릭은 컨테이너를 고정 폭으로 설정하지 않은 경우에 적합합니다. 너비를 컨테이너 내에 한 줄의 텍스트 콘텐츠 만있는 경우에는 텍스트를 세로로 정렬 할 수 있습니다. 이 트릭은 한 줄의 텍스트에서만 작동한다는 점을 기억하십시오. 내용이 두 개 이상의 줄로 나뉘는 경우 각 줄 사이의 간격은 개인적으로, CSS 테이블을 사용하는 것은 수직 정렬을 적용하기위한 가장 좋은 방법입니다. Internet Explorer 8과 같은 오래된 브라우저에서 작동합니다.이 방법은 컨테이너 요소 표시를 수직 센터링에 대한 마지막 방법은 Flexbox를 사용하는 것입니다. Flexbox는 CSS3의 새로운 모듈입니다. 그것은 콘텐츠를 정렬하기위한보다 간단한 방법을 제공합니다. 플렉스 상자에 내용을 세로로 가운데에 배치하려면 Flexbox의 일부 브라우저는 Internet Explorer 10, Safari, 6 및 Chrome 27 이하와 같은 Flexbox 모듈의 부분 기능 만 지원합니다. 따라서 CSS3 Transform의 트릭과 마찬가지로이 브라우저에서 효과가 제대로 떨어지는 지 확인하십시오..위치 재산. 너는 2 명있다. 순수한. 이렇게하면 컨테이너를 통해 자유롭게 배치 할 수 있습니다.. 순수한 위치는 동일한 컨테이너 내의 다른 요소에 영향을 미칩니다..2. CSS3 변환 사용
위치 동일한 컨테이너 내의 다른 요소의 위치에는 영향을주지 않습니다..50 % 위에서 CSS 변환을 사용하면 -50 %. 그리고 너는 그것을 가지고있다..3. 패딩 사용
심 수직 정렬이라는 착각을 일으킨다. 이렇게하려면 위쪽 및 아래쪽 패딩을 다음과 같이 똑같이 설정하면됩니다.자동.4. 라인 높이 사용
선 높이 재산. 설정 선 높이 컨테이너 높이와 거의 같은 값으로, 다음 출력을 볼 수 있습니다..선 높이, 우리에게 너무 많은 공백을 준다..5. CSS 표 사용
표, 자식 요소는 다음과 같이 표시됩니다. 표 셀 그런 다음 수직 정렬 속성을 세로로 가운데 맞추기.6. Flexbox 사용
align-items : 센터; 다음과 같이.
