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