如何在Bootstrap中垂直居中影像？

如何在 Bootstrap 中將影像垂直居中

在 Bootstrap 中將影像水平居中可以透過多種方式實現。

方法 1：使用 Center-Block 類別

Twitter Bootstrap v3.0.3 為此引入了 center-block 類別。它將元素設定為顯示：塊並通過邊距居中。

要使用此方法：

1. 將類別center-block 加入img 標籤：

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

方法2：使用網子格系統

或者，您可以使用Bootstrap 網格系統將行分成三個相等的區塊：

<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 將圖片設定為顯示 inline-block 並為其提供 margin-top equals到圖片高度的一半：

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

以上是如何在Bootstrap中垂直居中影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！