가로 중심 맞추기는 일반적인 문제입니다. 길은 여러 가지가 있는 것 같고, 모든 길은 로마로 통하는 것 같습니다. 그러나 체계적으로 검토한 후에는 실제로 몇 가지 아이디어를 중심으로 진행됩니다. 이 기사에서는 수평 센터링에 대한 4가지 아이디어를 소개합니다. 관심 있는 친구들은 이전 단어를 참조할 수 있습니다
수평 센터링은 종종 문제에 직면합니다. 길은 여러 가지가 있는 것 같고, 모든 길은 로마로 통하는 것 같습니다. 그러나 체계적으로 검토한 후에는 실제로 몇 가지 아이디어를 중심으로 진행됩니다. 이 글에서는 수평 센터링에 대한 4가지 아이디어를 소개합니다. 관심 있는 친구들은 참고하세요!
아이디어 1: 부모 요소에 text-align:center를 설정하여 인라인 요소를 수평 중앙에 배치
요소의 display가 inline-block으로 설정되어 하위 요소가 인라인 요소가 됩니다.
[참고] IE7 브라우저와 호환하려면 display:inline;zoom을 사용할 수 있습니다. :1; 인라인 블록 효과 달성
<style> .parent{text-align: center;} .child{display: inline-block;} </style> <p class="parent" style="background-color: gray;"> <p class="child" style="background-color: lightblue;">DEMO</p> </p>
아이디어 2: 설정 자체 요소 여백에: 0 블록 수준 요소의 가로 가운데 맞춤을 자동으로 구현합니다.
[1] 하위 요소를 테이블로 표시합니다. 하위 요소를 블록 수준 요소로 만드는 동시에 테이블도 래핑되고 콘텐츠에 따라 너비가 확장됩니다.
[참고] IE7 브라우저와 호환되도록 하려면, 하위 요소의 구조를
<style> .child{ display: table; margin: 0 auto; } </style> <p class="parent" style="background-color: gray;"> <p class="child" style="background-color: lightblue;">DEMO</p> </p>
【2】하위 요소에 고정된 경우 너비가 설정되지 않은 경우 상자 모델속성의 절대 위치 지정을 사용하여 가운데 맞춤 효과를 얻을 수 있습니다.
<style> .parent{ position: relative; } .child{ position: absolute; left: 0; rightright: 0; margin: 0 auto; width: 50px; } </style> <p class="parent" style="background-color: gray;height: 20px;"> <p class="child" style="background-color: lightblue;">DEMO</p> </p>
세 가지 아이디어: 절대 위치 지정을 통한 오프셋 속성 수평 중심 맞추기
【 1】translate() 변위 기능 사용
번역 기능의 백분율은 자체 너비에 상대적이므로 왼쪽:50%는 번역X(-50%)와 결합하여 달성할 수 있습니다. 센터링 효과
[참고] IE9 브라우저는
<style> .parent{ position: relative; } .child{ position: absolute; left: 50%; transform:translateX(-50%); } </style> <p class="parent" style="background-color: gray;height: 20px;"> <p class="child" style="background-color: lightblue;">DEMO</p> </p>
【2】상대
<🎜를 지원하지 않습니다. > 상대적인 오프셋 속성은 하위 요소가 절대값으로 설정되었기 때문에 자체적으로 상대적입니다. 따라서 상대적인 요소를 사용하는 경우 너비가 요소의 너비와 동일하도록
<style> .parent{ position: relative; } .childWrap{ position: absolute; left: 50%; } .child{ position: relative; left: -50%; } </style> <p class="parent" style="background-color: gray;height: 20px;"> <p class="childWrap"> <p class="child" style="background-color: lightblue;">DEMO</p> </p> </p>
【 3】음수 여백
여백 비율은 포함 블록을 기준으로 하므로
구조의 레이어를 추가해야 합니다. 너비의 기본값은 자동이므로 음수 여백을 설정하면 너비도 증가합니다. 따라서 이때는 고정폭 처리가 필요합니다
[참고] 완벽하게 호환되지만 페이지 구조와 고정폭 처리를 늘려야 하므로 적용 시나리오가 제한됩니다
<style> .parent{ position: relative; } .childWrap{ position: absolute; left: 50%; } .child{ width:50px; margin-left:-50%; } </style> <p class="parent" style="background-color: gray;height: 20px;"> <p class="childWrap"> <p class="child" style="background-color: lightblue;">DEMO</p> </p> </p>
아이디어 4: 유연한 상자 모델 flex를 사용하여 수평 중심 맞추기
[참고] IE9 브라우저는 <를 지원하지 않습니다. 🎜>
[1] 스케일링에서 컨테이너의 주축 정렬 jusify-content 설정: center
<style> .parent{ display: flex; justify-content: center; } </style> <p class="parent" style="background-color: gray;"> <p class="child" style="background-color: lightblue;">DEMO</p> </p>
【2】확장 가능한 프로젝트의 여백 설정: 0 자동
위 내용은 수평 센터링을 달성하기 위해 CSS를 사용하는 4가지 아이디어에 대한 간략한 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!