在屏幕上对中横幅图像调整大小

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>