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

使用bootstrap 3

1 个答案: