如何使用 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" src="logo.png" /></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中文网其他相关文章！