我正在使用引导框架,并试图获得一个图像水平居中没有成功。

我尝试了各种技术,如将12个网格系统分成3个相等的块

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

让图片相对于页面居中最简单的方法是什么?


当前回答

Twitter bootstrap有一个以。pagation - centric为中心的类

这对我来说很有效:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

这个类的css是:

.pagination-centered {
  text-align: center;
}

其他回答

Twitter bootstrap有一个以。pagation - centric为中心的类

这对我来说很有效:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

这个类的css是:

.pagination-centered {
  text-align: center;
}

我创建了这个并添加到Site.css中。

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

对我有用。试着使用中心方块

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

正确的做法是

<div class="row text-center">
  <img ...>
</div>

在 Bootstarp 5.0 中

Use

.mx-auto .d-block