Bootstrap에서 이미지를 수직 중앙에 배치하는 방법은 무엇입니까?

Bootstrap에서 이미지를 세로로 가운데에 맞추는 방법

Bootstrap에서 이미지를 가로로 가운데 맞추는 방법은 다양합니다.

방법 1: Center-Block 클래스 사용

Twitter Bootstrap v3.0.3에서는 이러한 목적으로 center-block 클래스를 도입합니다. 표시할 요소를 설정합니다: block 및 여백을 통해 중앙에 배치합니다.

이 방법을 사용하려면:

1. img 태그에 클래스 center-block을 추가합니다:

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

방법 2: 그리드 시스템 사용

또는 부트스트랩 그리드 시스템을 사용하여 행을 3개의 동일한 블록으로 분할할 수 있습니다.

<code class="html"><div class="row">
  <div class="col-4"></div>
  <div class="col-4"><img src="logo.png" /></div>
  <div class="col-4"></div>
</div></code>

이 방법은 이미지를 행 내에서 수평으로 중앙에 배치합니다.

이미지를 수직으로 중앙에 배치하려면 추가로 CSS를 사용하여 이미지가 인라인 블록을 표시하도록 설정하고 여백 상단 동일을 제공할 수 있습니다. 이미지 높이의 절반으로:

<code class="css">img {
  display: inline-block;
  margin-top: -(image-height / 2);
}</code>

위 내용은 Bootstrap에서 이미지를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!