如何使用 .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中文网其他相关文章！