使用引導程序時圖像周圍的空白區域3

好吧，所以我正在使用Bootstrap 3框架製作網站，而且我遇到了問題。當我放置一個圖像（普通的，帶有img標籤）時，它在屏幕上有空白區域（左和右）。 http://prntscr.com/9wuek5 - 你可以在這裏看到，它甚至在我的導航欄下。我想要做的是以某種方式擺脫那個空白區域，並將圖片移動到中心（水平和垂直）。這是我到目前爲止的代碼：使用引導程序時圖像周圍的空白區域3

<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"/>

我試圖把邊框圖片，因此我可以看到，如果它適用於空白，但它不是，它只是周圍的圖像，因爲它應該是。

來源

2016-01-30 ivke080

嘗試添加'顯示：塊;'你'' – zgood

試過了，什麼也沒有發生：/ – ivke080

你可以把你的問題[小提琴]（https://jsfiddle.net/n9a6kvw3/1/）（或更新這一個 - 改變img尺寸） – zgood

您完全可以通過以下方式定位您的圖像：

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

看到這個fiddle

來源

2016-01-30 17:26:45 zgood

使用引導程序時圖像周圍的空白區域3

回答

相關問題