수평 센터링을 달성하기 위해 CSS를 사용하는 4가지 아이디어에 대한 간략한 개요

가로 중심 맞추기는 일반적인 문제입니다. 길은 여러 가지가 있는 것 같고, 모든 길은 로마로 통하는 것 같습니다. 그러나 체계적으로 검토한 후에는 실제로 몇 가지 아이디어를 중심으로 진행됩니다. 이 기사에서는 수평 센터링에 대한 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 브라우저와 호환되도록 하려면, 하위 요소의 구조를 818fbd9ed5d2bf0044e6cee6956524cdDEMO5e1af7a49b6fdf6811db951fbb418f60 구조의 레이어를 추가해야 합니다. 너비의 기본값은 자동이므로 음수 여백을 설정하면 너비도 증가합니다. 따라서 이때는 고정폭 처리가 필요합니다

[참고] 완벽하게 호환되지만 페이지 구조와 고정폭 처리를 늘려야 하므로 적용 시나리오가 제한됩니다

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!