Question

我正在使用带有razor viewengine和bootstrap的mvc5 我想成为一些图像居中，当我使用Boostrap.css中心不工作，但当我删除bootstrap.css它工作正常。我使用了bootsrtap text center class，但它也不起作用：/ http://jsfiddle.net/9h5rvgLc/

Answer 1

还有另一种方法：

在图片中加入 class =＆＃34; center-block＆＃34; ，如下所示：

<img .. class="img-responsive center-block" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />

检查小提琴：
https://jsfiddle.net/9h5rvgLc/5/

Answer 2

使用.img-responsive{ margin:0px auto}可能适合您

Answer 3

尝试将display: block; margin: 10px auto添加到style属性。这将使div图像居中。我已经更新了jsfiddle for demo，link。

<div>
  <div style="margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-12 col-md-6 col-lg-4">
    <a href="#">
      <img style="display: block; margin: 10px auto; width:450px ; height:390px;" class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
    </a>
    <h3 class="h">@item.GoodTitle</h3>
    <h5 class="h">@item.GoodSubText</h5>
  </div>
</div>

聚苯乙烯。还会将height从height: 390px更改为height: auto，以避免图像拉伸。

Answer 4

将您的图片代码更改为：

<img style="width:450px ; height:390px; display: inline" class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />

注意我添加了：display: inline

Bootstrap不要让我以div为中心

4 个答案: