Bootstrap에서 이미지를 수평으로 쉽게 중앙에 배치하려면 어떻게 해야 합니까?

Bootstrap을 사용하여 이미지를 수평으로 정렬: The Elusive Center

웹 개발 영역에서 많은 사람들이 직면한 공통 과제는 신뢰할 수 없는 기술을 사용하지 않고 이미지를 수평으로 중앙에 배치합니다. 인기 있는 Bootstrap 프레임워크를 사용하고 있다면 이 수수께끼 같은 문제에 대한 간단한 해결책이 있다는 사실을 알게 되면 안심이 될 것입니다.

Bootstrap의 중앙 블록의 위대함을 느껴보세요

Bootstrap 버전 3.0.3에는 이미지 정중앙 정렬의 딜레마를 단순한 코드 줄로 쉽게 해결하는 "center-block"이라는 적절한 이름의 클래스가 도입되었습니다. 이 독창적인 클래스는 단순히 CSS 속성을 추가합니다.

display: block;
margin-left: auto;
margin-right: auto;

아래 그림과 같이 이 클래스를 이미지 태그에 통합하면 원하는 가로 가운데 맞춤 효과를 얻을 수 있습니다.

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

중앙 블록 클래스의 편리함은 여백을 자동으로 조정하여 이미지가 너비에 관계없이 중앙에 완벽하게 유지되도록 하는 기능에 있습니다. 더 이상 두통이 없습니다! 귀하의 이미지는 새로운 균형 감각으로 귀하의 웹 페이지를 우아하게 만들어 줄 것입니다.

위 내용은 Bootstrap에서 이미지를 수평으로 쉽게 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!