CSS의 텍스트와 아이콘을 수직으로 중심하는 방법

이 기사는 한때 까다 롭지 만 이제는 구현하기가 쉬운 다양한 CSS 수평 및 수직 센터링 방법을 소개합니다. Flexbox 및 Positioning Plus Transformations를 사용하여 수평 및 수직 센터링을 다룰 것입니다. 다른 기사에서는 수평 및 수직 센터링에 CSS 그리드를 사용하는 방법도 포함됩니다.

키 포인트 요약

Flexbox를 수직 중앙 텍스트 및 아이콘 사용 : 컨테이너를 컨테이너로 변환하고 중앙 아동 요소에 및 를 사용하십시오.

및 의 조합은 특히 매우 가변적 인 요소에 대해 수직 센터링을 달성 할 수 있습니다. 이는 포지셔닝 컨텍스트를 작성하고 컨테이너에 대한 요소의 위치를 ​​조정하여 수행됩니다.

justify-content 속성은 고정 높이 컨테이너 내의 단일 텍스트 라인 또는 아이콘을 세로 중심으로 사용하는 데 사용될 수 있으며 align-items는 인라인 요소를 중심하는 데 사용될 수 있습니다.

position 수평 및 수직 센터링에 Flexbox를 사용하는 방법 transform

Flexbox는 요소를 수평 및 수직으로 정렬하여 CSS의 텍스트, 아이콘 또는 기타 요소를 중심으로 할 수 있습니다.

Flexbox Centering 요소를 사용하려면 다음 코드 스 니펫을 사용할 수 있습니다. line-height 이 코드 스 니펫은 플렉스 컨테이너로 변환하여 자식 요소를 플렉스 프로젝트로 자동 변환합니다. 그런 다음 를 사용 하여이 플렉스 항목을 가로로 중앙으로 중앙으로 중앙으로 중앙으로 사용하여 수직으로 중앙을 중심으로 할 수 있습니다. vertical-align 뷰 예 : 코드 펜 링크

계속 읽기 상자 모델의 수직 포지셔닝 및 위치 기술에 대해 알아보십시오.

융통성있는 수직 센터링을 달성하기 위해 위치를 사용하고 변환하는 방법 Flexbox를 사용할 수 없거나 컨테이너의 품목을 중앙에 놓아야하는 경우

를 사용하여 컨테이너 중앙에 요소를 배치 할 수 있습니다.

대신, 우리는

를 결합하여 고도로 가변적 인 요소를 세로 중심으로 변환 할 수 있습니다. 예를 들어, 뷰포트의 전체 높이에 걸쳐 요소를 수직으로 중앙으로 중앙에 있으려면 다음 코드 스 니펫을 사용할 수 있습니다.

먼저 컨테이너 요소에서

를 설정하여 포지셔닝 컨텍스트를 만듭니다. 이를 통해 우리는 그 경계 내에서

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

요소를 찾을 수 있습니다.

다음으로, 우리는 요소의 왼쪽 상단을 부모 요소의 상단의 50%에 놓고 왼쪽 가장자리를 왼쪽의 왼쪽의 50%에 놓아 컨테이너 중앙에 중앙에 위치하도록 배치합니다. 부모 요소 장소. .container 마지막으로, 높이의 50%, 폭의 50%를 왼쪽으로 묶어 요소를 중앙으로 다시 조정하십시오. 이제 우리의 요소는 컨테이너 내에서 수직 및 수평으로 중앙에 있습니다. 배치는 요소의 크기에 비해 백분율 값을 사용하여 수행되므로 컨테이너 또는 하위 요소의 너비 또는 높이가 변경되면 요소는 중심 상태로 유지됩니다. justify-content 뷰 예 : 코드 펜 링크 align-items

고정 높이에서 수직으로 중앙에 선-높이를 사용하는 방법 컨테이너 내에서 한 줄의 텍스트 또는 아이콘을 수직으로 중앙으로 중앙에 있으려면 속성을 ​​사용하십시오. 이 속성은 텍스트 실행의 선 높이를 제어하고 인라인 요소의 와이어 프레임 위와 아래에 같은 양의 공간을 추가합니다. 컨테이너의 높이가 알려지면 동일한 값의 를 설정하면 자식 요소가 세로로 중성화됩니다.

line-height 수직 정전을 중앙 인라인 요소에 사용하는 방법 line-height

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

속성은 , 로 표시되는 요소에만 영향을 미칩니다. 길이, 백분율 또는 키워드 값이 소요됩니다. 길이 및 백분율은 요소의 기준선을 부모 요소 기준선 위의 주어진 거리로 정렬합니다.

키워드 값은 다음 중 하나 일 수 있습니다

vertical-align inline inline-block table-cell

• baseline
• sub 이들 중 대부분은 매우 직관적이지만
는 기준선을 부모 요소의 첨자 기준선과 정렬하는 반면 요소의 기준선을 모체 요소의 초기 스크립트 기준선과 정렬합니다.
• 실용적인 예에서 super를 살펴 보겠습니다.
여기에는 이미지와 텍스트 그리드가 있습니다. 둘 다 높이가 다릅니다. 즉, 텍스트가 모두 깔끔하게 정렬되지는 않습니다.
• (원본 텍스트의 HTML 코드는 여기에 삽입하고 그에 따라 더 간결하고 이해하기 쉽고 잘못된 링크를 사용하지 않도록 수정해야합니다. 우리는 그리드 컨테이너를 text-top로 설정하고 이미지에서
를 사용하여 모든 것을 깔끔하게 정렬하게 만들 수 있습니다.
• 여기에 텍스트가없고 모든 이미지가 수직으로 중앙에있는 경우 text-bottom를 사용하고 꽤 좋은 결과를 얻을 수 있습니다.
더 많은 센터링 방법의 경우 수평 및 수직 센터링에 CSS 그리드를 사용하는 방법을 확인하십시오.
• CSS에서 텍스트와 아이콘을 수직으로 중앙으로 중앙을 중앙으로 중앙으로 중앙에있는 방법에 대한 middle FAQ (원래 FAQ 부분이 여기에서 간소화되어 핵심 정보를 유지하고 일부 답을 더 명확하게 표현했습니다.)
수직 정렬이란 무엇입니까?
• CSS의 수직 정렬은 수직 축을 따라 요소의 위치를 ​​제어하는 ​​속성입니다. 레이아웃을 정확하고 유연하게 설계하는 데 도움이되는 강력한 도구입니다. 수직으로 중심 요소를 사용하거나 용기의 상단 또는 하단에 맞추거나 수직 공간에 고르게 배포하는 데 사용될 수 있습니다. CSS의 top 속성은 일반적으로 인라인 또는 인라인 블록 요소와 함께 사용되지만 테이블 셀과 함께 사용할 수도 있습니다.
CSS를 수직 중심 텍스트에 사용하는 방법은 무엇입니까?
• bottom는
및 를 사용하여 텍스트를 수직으로 중앙으로 사용할 수 있습니다.

sub 수직 정렬을 사용하여 블록 레벨 요소를 처리 할 수 ​​있습니까? super 블록 레벨 요소는 를 사용하여 수직으로 정렬 할 수 있습니다.

내 수직 정렬이 작동하지 않는 이유는 무엇입니까? position: relative; top: 50%; transform: translateY(-50%); 원인에는 높이를 지정하지 않는 모 컨테이너 또는 를 사용하여 블록 레벨 요소를 정렬하려는 시도가 포함될 수 있습니다.

이미지를 수직으로 정렬하는 방법은 무엇입니까? 텍스트와 동일한 방법을 사용할 수 있습니다. CSS 그리드를 처리하는 데 수직 정렬을 사용할 수 있습니까?

속성을 ​​사용할 수 있습니다.

vertical-align 버튼에서 텍스트를 세로 정렬하는 방법은 무엇입니까?

는

속성과 함께 사용할 수 있으며 값은 버튼 높이와 동일해야합니다. 여러 요소를 수직으로 정렬하는 방법은 무엇입니까?

플렉스 또는 그리드 방법을 사용할 수 있습니다.
수직 정렬을 사용하여 절대 포지셔닝을 처리 할 수 ​​있습니까?

및 특성을 사용할 수 있습니다.

테이블 셀에서 텍스트를 세로 정렬하는 방법은 무엇입니까? align-items 를 사용할 수 있습니다.

위 내용은 CSS의 텍스트와 아이콘을 수직으로 중심하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!