html - 使用 bootstrap 3 时图像周围的空白

Question

好的，我正在使用 Bootstrap 3 框架制作一个网站，但我遇到了一个问题。当我放置图像(常规图像，带有 img 标签)时，它在屏幕上有空白(左右)。 http://prntscr.com/9wuek5 - 你可以在这里看到，它甚至在我的导航栏下面。我想要做的是以某种方式摆脱那个空白，并将图片移动到中心(水平和垂直)。到目前为止，这是我的代码:

<nav id="mainNavbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#colaps">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ivke11080</a>
        </div>
        <div class="collapse navbar-collapse" id="colaps">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="page-scroll" href="#">Home</a></li>
                <li><a class="page-scroll" href="#">Projects</a></li>
                <li><a class="page-scroll" href="#portfolio">About</a></li>
            </ul>
        </div>
    </div>
</nav>

<img src="img/chase.jpg"/>

我试图在图像周围放置边框，以便我可以查看它是否适用于空白区域，但事实并非如此，它只是围绕着图像，因为它应该如此。

Answer 1

您完全可以使用以下样式来定位您的图像:

img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, 50%);
}

查看此 fiddle