如何将图像死点与引导程序对齐

Question

我正在使用引导程序框架并尝试将图像水平居中而不成功.

我已经尝试了各种技术,例如将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>

使图像相对于页面居中的最简单方法是什么？

Answer 1

Twitter Bootstrap v3.0.3有一个类:center-block

中心内容块

设置要显示的元素:通过边距阻止和居中.可作为mixin和class使用.

只需要在img标签中添加一个类"center-block",看起来就像这样

<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>

在Bootstrap中已经有css样式调用.center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

你可以从这里看到一个样本

Answer 2

这样做的正确方法是

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

Answer 3

将"center-block"添加到图像作为类 - 不需要额外的css

<img src="images/default.jpg" class="center-block img-responsive"/>

Answer 4

更新2018年

该center-block级不再存在引导4.要在Bootstrap 4中居中图像,请使用mx-auto d-block......

<img src="..." class="mx-auto d-block"/>

Answer 5

Twitter引导程序有一个以:.pagination为中心的类

它对我有用:

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

该课程的CSS是:

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

Answer 6

您可以使用以下内容.它支持上面的Bootstrap 3.x.

<img src="..." alt="..." class="img-responsive center-block" />

Answer 7

假设图像旁边没有其他内容,最好的方法是text-align: center在img父级中使用:

.row .span4 {
    text-align: center;
}

编辑

如其他答案中所述,您可以将引导CSS类添加.text-center到父元素.这完全相同,并且在v2.3.3和v3中均可用

Answer 8

适合我.尝试使用center-block

<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>

Answer 9

我需要相同的,在这里我找到了解决方案:

/sf/answers/1055920351/

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

和CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}