Bootstrap의 .center-block 클래스를 사용하여 페이지의 이미지를 완벽하게 중앙에 배치하는 방법은 무엇입니까?

Bootstrap을 사용하여 페이지 중앙에 이미지를 완벽하게 정렬

Twitter Bootstrap을 사용하여 작업할 때 이미지를 가로 중앙에 배치하는 것이 항상 간단하지 않을 수 있습니다. 이 기사에서는 이미지를 페이지 중앙에 쉽게 정렬하기 위해 Bootstrap 클래스인 .center-block을 사용하는 솔루션을 제시합니다.

.center-block 클래스 이해

.center-block 클래스 Twitter Bootstrap v3.0.3은 페이지 중앙에 블록 요소를 정렬하도록 특별히 설계되었습니다. 표시 속성을 block으로 설정하고 여백(왼쪽 여백 및 오른쪽 여백)을 자동으로 조정하여 요소가 가로 및 세로 모두 중앙에 위치하도록 합니다.

.center-block을 사용하여 이미지 정렬

.center-block을 사용하여 이미지를 중앙에 배치하려면 행 내의 img 태그에 클래스를 추가하기만 하면 됩니다. 예를 들어:

<code class="html"><div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div></code>

.center-block 클래스 스타일 시트는 다음을 정의합니다.

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

예

실시간 데모를 보려면 다음을 방문하세요. 샘플 페이지:

[샘플 페이지](URL)

.center-block 클래스를 활용하면 모든 이미지를 페이지 중앙에 손쉽게 정렬하여 시각적으로 보기 좋고 균형 잡힌 레이아웃을 보장할 수 있습니다. .

위 내용은 Bootstrap의 .center-block 클래스를 사용하여 페이지의 이미지를 완벽하게 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!