CSS 중심

百草
풀어 주다: 2023-07-27 16:41:22
원래의
1316명이 탐색했습니다.

Css 센터링: 1. 가로 센터링은 "margin: 0 auto; text-align: center"를 통해 이루어집니다. 2. 가로 센터링은 "display:flex"를 통해 이루어집니다. 3. 가로 센터링은 "display:table-"을 통해 이루어집니다. cell"과 "margin-left"는 중앙 정렬을 달성합니다.

CSS 중심

CSS의 중심을 설정하는 방법:

1. CSS의 수평 중심을 맞추려면 margin: 0 auto;

이 방법은 CSS의 수평 센터링을 달성하기 위해 가장 일반적으로 사용됩니다. 프런트 엔드 개발에서 CSS의 수평 센터링의 약 60%는 "margin: 0 auto; text-align: center"를 통해 달성됩니다.

2. CSS의 수평 중심을 맞추려면 display:flex를 사용하세요.

Flexbox와 호환되는 경우가 많아지면서 "display:flex"를 통한 CSS의 수평 중앙 정렬 솔루션이 점점 더 대중화되고 있습니다.

display:flex를 통한 CSS 수평 센터링의 원리는 상위 요소가 display:flex;flex-direction:column;이고 하위 요소가 align-self:center;

이것은 CSS 수직 센터링의 원리와 동일합니다. , flex 제외 -방향에는 차이가 있습니다. 하나는 행(기본값)이고 다른 하나는 열입니다.

3. display:table-cell 및 margin-left를 통해 CSS 가로 가운데 맞춤을 구현합니다.

부모 요소와 자식 요소의 너비가 모두 결정되는 상황에서는 display:table-cell 및 margin-left를 통해 CSS 가로 센터링을 구현하는 것이 적합합니다.

사용하면 상위 요소에 table-cell이 표시되고 하위 요소에는 남은 너비의 절반만큼 왼쪽 여백이 제공됩니다.

위 내용은 CSS 중심의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!