CSS에서 중앙 정렬을 위해 인라인 블록을 사용하는 예에 대한 자세한 설명

이 글에서는 주로 CSS에서 중앙 정렬을 위해 inline-block을 사용하는 예를 자세히 설명합니다. 사용 시 컨테이너의 너비에 주의하세요. 필요한 친구는

시급하게 필요한 방법을 참고하세요. : 인라인 블록 방식 중심. 기본 접근 방식은 디스플레이: 인라인 블록, 수직 ​​정렬: 중간 스타일 및 의사 요소를 사용하여 콘텐츠 블록을 컨테이너의 중앙에 배치하는 것입니다. 내 구현에서는 일부 문제를 해결하기 위해 다른 곳에서는 볼 수 없는 몇 가지 새로운 트릭을 사용합니다.

선언된 콘텐츠 영역의 너비는 컨테이너의 100%에서 너비 0.25em을 뺀 값보다 클 수 없습니다. 긴 텍스트가 있는 영역과 같습니다. 그렇지 않으면 콘텐츠 영역이 맨 위로 푸시되므로 :after 의사 클래스가 사용됩니다. :before 의사 클래스를 사용하면 요소 크기가 100%가 됩니다!

콘텐츠 블록이 가능한 한 많은 수평 공간을 차지해야 하는 경우 큰 컨테이너에 max-width: 99% 스타일을 추가하거나 브라우저를 고려할 때 max를 사용할 수 있습니다. 및 컨테이너 너비 -width: calc(100% – 0.25em) 스타일.

이 방법은 테이블셀과 대부분의 장점이 비슷하지만, 처음에는 이 방법이 더 해킹에 가깝기 때문에 포기했습니다. 그럼에도 불구하고 브라우저 지원은 훌륭하며 이 방법은 매우 인기가 있는 것으로 입증되었습니다.

HTML:

<p class="Center-Container is-Inline">
  <p class="Center-Block">
    <!-- CONTENT -->
  </p>
</p>

CSS:

.Center-Container.is-Inline {    
  text-align: center;   
  overflow: <span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=auto&k0=auto&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;   
}   

.Center-Container.is-Inline:after,   
.is-Inline .Center-Block {   
  display: inline-<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;   
  vertical-align: middle;   
}   

.Center-Container.is-Inline:after {   
  content: &#39;&#39;;   
  height: 100%;   
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}   

.is-Inline .Center-Block {   
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

장점:

콘텐츠가 매우 다양함
콘텐츠가 넘치면 자동으로 상위 요소의 높이를 확장할 수 있습니다.
브라우저 호환성이 좋으며 IE7을 지원하도록 조정할 수도 있습니다.

동시에 다음 사항에 유의하세요.

추가 컨테이너 필요
여백에 따라 다름 - 왼쪽: -0.25em 스타일, 가로 중심, 다양한 글꼴 크기에 맞게 조정 필요
콘텐츠 영역의 선언된 너비는 컨테이너의 100%보다 클 수 없습니다. 너비 0.25em

위 내용은 CSS에서 중앙 정렬을 위해 인라인 블록을 사용하는 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!