html - 如何将与 bootstrap 和 css 相关的图像居中

Question

我正在尝试将图像居中，但经过一些尝试后我无法使其正常工作。显然我所做的更改没有生效。图片代码如下

<div class="col-md-4 col-sm-3 team-grid team-grid1 animated wow slideInUp" data-wow-delay=".5s">
    <img src="images/shane-de-abreu-arquetipo-shane.jpg" alt="Shane de Abreu" class="img-responsive" />
    <div class="p-mask">
        <h4>Shane de Abreu</h4>
        <ul>
            <li><a class="podbean" href="http://arquetiposhane.podbean.com"></a></li>
            <li><a class="facebook" href="https://www.facebook.com/arquetiposhane"></a></li>
            <li><a class="youtube" href="https://www.youtube.com/channel/UCj6b5dpMH0RXAEpJV6fN-bQ"></a></li>
        </ul>
    </div>
</div>

由于我是新手，我不知道应该更改哪个文件，在检查元素后我意识到它与 CSS (style.css) 和 Bootstrap (bootstrap.css) 有关.所以我尝试将 W3S 推荐的代码添加到这些文件中，我在下面给出的代码。

img {
    display: block;
    margin: auto;
}

问题是我不知道我要把它放在哪里，所以我做了一些尝试，但没有成功。我尝试更改下面的 team-grid 设置

}
.team-grid{
    position:relative;
    overflow: hidden;
}

此外，尝试通过更改 team-grid1 设置

.team-grid1,.team-grid2{
    margin-bottom:20px;
}

还尝试更改 img 设置(style.css 文件)

img {
    width: 100%;
}

并尝试更改 img 设置(bootstrap.css 文件)

img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;

}

我不知道我是否应该放置 W3S 推荐的代码(bootstrap 或 style)，因为显然一个在统治另一个，但我不知道哪个是。有人可以帮我把这张图片居中吗？它位于 www.arquetiposhane.tk 网站。

非常感谢!

Answer 1

使用下面的代码，这将使您的图片居中

.team-grid{
  margin: 0 auto;
  float: none;
}