如何使用 .center-block 在 Bootstrap 中完美居中圖像？

使用 Bootstrap 將影像完美居中

使用 Bootstrap 框架時，水平居中影像可能是一個挑戰。但是，使用內建類別 .center-block 有一個簡單的解決方案。

CSS 類：.center-block

.center-block 類， Twitter Bootstrap v3.0.3 中引入，使用邊距水平居中內容區塊。它可以用作 mixin 或類別。

用法

要使用.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 在 Bootstrap 中完美居中圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！