.center-block을 사용하여 부트스트랩에서 이미지를 완벽하게 중앙에 배치하는 방법은 무엇입니까?

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

Bootstrap 프레임워크를 사용할 때 이미지를 수평으로 중앙에 맞추는 것은 약간 어려울 수 있습니다. 그러나 내장 클래스 .center-block을 사용하는 쉬운 솔루션이 있습니다.

CSS 클래스: .center-block

.center-block 클래스, Twitter Bootstrap v3.0.3에 도입되었으며 여백을 사용하여 콘텐츠 블록을 수평으로 중앙에 배치합니다. 믹스인이나 클래스로 사용할 수 있습니다.

사용법

.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>

CSS

.center-block 클래스에는 다음과 같은 CSS 속성이 있습니다.

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

이 속성은 이미지를 다음과 같이 표시하도록 설정합니다. 블록 요소를 만들고 양쪽에 동일한 여백을 적용하여 페이지 중앙에 배치합니다.

예

.center를 사용하여 중앙에 배치된 이미지의 실시간 예를 볼 수 있습니다. 다음에서 차단하세요: [샘플 URL은 여기]

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