如何使用 Bootstrap 的 .center-block 類別在頁面上完美居中圖片？

使用 Bootstrap 將圖像完美地對齊在頁面中心

使用 Twitter Bootstrap 時，水平居中圖像可能並不總是那麼簡單。本文介紹了一種使用 Bootstrap 類別 .center-block 輕鬆將圖像死點與頁面對齊的解決方案。

了解 .center-block 類別

.center-block 類別Twitter Bootstrap v3.0.3 是專門為在頁面中心對齊區塊元素而設計的。它將顯示屬性設為 block，並將邊距（margin-left 和 margin-right）調整為 auto，確保元素水平和垂直居中。

使用 .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 lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="如何使用 Bootstrap 的 .center-block 類別在頁面上完美居中圖片？" ></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中文網其他相關文章！