在屏幕上對中橫幅圖像調整大小

Question

我在嘗試調整屏幕尺寸時出現橫幅圖像（「審閱我們」文本和線條）未正確居中的問題。這是我的問題之前和之後的情況。後圖像也顯示在手機屏幕 before after

相同的結果

該圖像的HTML去如下：

​​

生效的唯一CSS是

​​

我希望無論屏幕寬度如何，圖像的「評審我們」文本部分都是居中（從左到右）

Answer 1

您可能遇到的問題可能是從桌面到手機，漢堡包菜單會移動您的徽標。使用絕對位置與transform: translate(-50%, 0%);將中心您的img自己的寬度。

.rowBanner { 
    position: absolute; 
    left: 50%; 
    display: block; 
    transform: translate(-50%, 0%); 
} 

居中百分比寬度/高度元素

REF：https://css-tricks.com/centering-percentage-widthheight-elements/

.navbar { 
 
    position: relative; 
 
} 
 

 
.rowBanner { 
 
    position: absolute; 
 
    left: 50%; 
 
    display: block; 
 
    transform: translate(-50%, 0%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="rowBanner"> 
 
     <img src="http://via.placeholder.com/100x50" alth="review"> 
 
    </div> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Answer 2

你可以試試下面的CSS：

div.rowBanner { 
margin-left:auto; 
margin-right:auto; 
width:80%; 
} 

Answer 3

就在這個CSS添加到圖像：

div.rowBanner > img { 
    display: block; 
    margin: 0 auto; 
    max-width: 100vw; 
} 

編輯：增加了一個最大的一起的IMG，100vw意味着100個視口寬度單位，見：http://caniuse.com/#feat=viewport-units

Answer 4

關於使用CCS 背景是什麼 - 圖像設置您的圖像。然後，您可以控制中心點通過背景位置

function resize(isDesktop) { 
 
    if (isDesktop) { 
 
    $('.banner').css('width', '100%'); 
 
    } else { 
 
    $('.banner').css('width', '200px'); 
 
    } 
 
}

.banner { 
 
    background-image: url('https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 175px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="resize(true)">Desktop</button> 
 
<button onclick="resize()">Mobile</button> 
 

 
<div class="page"> 
 
    <div class="banner"> 
 
    </div> 
 
</div>