如何将图像死点与引导alignment
我使用的引导框架，并试图获得水平居中没有成功的图像..
我已经尝试了各种技术，例如在3个相同的块中分割12个网格系统
<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 v3.0.3有一个类：中心块
中心内容块
设置要显示的元素：块和中心通过边距。 可作为混合和类。
只需要在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>
在Bootstrap中已经有了css风格的调用.center-block
.center-block { display: block; margin-left: auto; margin-right: auto; }
你可以从这里看到一个样本
正确的做法是
<div class="row text-center"> <img ...> </div>
添加“中心块”图像作为类 – 没有额外的CSS需要
<img src="images/default.jpg" class="center-block img-responsive"/>
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; }
你可以使用以下。 它支持上面的Bootstrap 3.x。
<img src="..." alt="..." class="img-responsive center-block" />
假设图像旁边没有任何东西，最好的方法是在img父级中使用text-align: center ：
.row .span4 { text-align: center; }
编辑
正如其他答案中所提到的，您可以将引导CSS类.text-center到父元素。 这是完全相同的事情，并在v2.3.3和v3都可用
为我工作。 尝试使用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>
2017年更新
Bootstrap 4中不再存在center-block类。 要将图像置于Bootstrap 4中，请使用mx-auto d-block …
<img src="..." class="mx-auto d-block"/>
我需要相同的，在这里我find了解决scheme：
https://stackoverflow.com/a/15084576/1140407
<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; }
你应该使用
<div class="row fluid-img"> <img class="col-lg-12 col-xs-12" src="src.png"> </div> .fluid-img { margin: 60px auto; } @media( min-width: 768px ){ .fluid-img { max-width: 768px; } } @media screen and (min-width: 768px) { .fluid-img { padding-left: 0; padding-right: 0; } }
您可以使用引导程序img类使用保证金属性。
.name-of-class .img-responsive { margin: 0 auto; }
似乎我们可以使用一个新的HTML5function，如果浏览器版本不是一个问题：
在HTML文件中：
<div class="centerBloc"> I will be in the center </div>
在CSS文件中，我们写道：
body .loadingDiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
所以div可以完美的浏览器中心。
你可以改变以前的解决scheme的CSS如下：
.container, .row { text-align: center; }
这应该集中在父div所有元素。
