수평 센터링을 달성하기 위해 CSS를 사용하는 4가지 아이디어에 대한 간략한 개요-CSS 튜토리얼-php.cn

가로 중심 맞추기는 일반적인 문제입니다. 길은 여러 가지가 있는 것 같고, 모든 길은 로마로 통하는 것 같습니다. 그러나 체계적으로 검토한 후에는 실제로 몇 가지 아이디어를 중심으로 진행됩니다. 이 기사에서는 수평 센터링에 대한 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 브라우저와 호환되도록 하려면, 하위 요소의 구조를

DEMO

<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】상대
<🎜를 지원하지 않습니다. > 상대적인 오프셋 속성은 하위 요소가 절대값으로 설정되었기 때문에 자체적으로 상대적입니다. 따라서 상대적인 요소를 사용하는 경우 너비가 요소의 너비와 동일하도록
[참고] 이 방법은 완전히 호환되지만 html 구조를 추가합니다

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