html - img-responsive 不居中

Question

我需要一些帮助。
img-responsive 不以这段代码为中心。

div.container-main {
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
}

那么HTML代码就是这个

  <div class="container-main">  
  <section class="main">
        <img class="img-responsive" src="img/bio.png" alt="Microscópio Óptico">
  </section>

有什么帮助吗？我已经看过 this one但没有为我工作。
没有 img-responsive 它工作得很好。
我正在使用 Bootstrap。

Answer 1

这是一个令人愉快的简单修复。因为来自 Bootstrap 的 .img-responsive 已经设置了 display: block，你可以使用 margin: 0 auto 来居中图像:

.img-responsive {
    margin: 0 auto;
}