画面上のセンタリングバナー画像のサイズ変更

Question

画面サイズを調整しようとするとバナー画像（「Review Us」のテキストと行）が正しくセンタリングされないという問題があります。ここに私の問題が何の前と後です。後の画像も携帯の画面before after

に同じ結果を示している

その画像のHTMLは以下のようになります：効果で

​​

だけCSSが上にある

​​

画面の幅に関係なく、画像の「Review Us」テキスト部分を中央に揃えたい（左から右へ）

Answer 1

問題はデスクトップからモバイルへのhambugerメニューのロゴのシフトです。ポジションアブソリュートを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 背景の使用方法について-imageあなたのイメージを設定します。中心点が異なる解像度である場合、あなたはその後、背景位置を経由して

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>