在屏幕上对中横幅图像调整大小
我在尝试调整屏幕尺寸时出现横幅图像(“审阅我们”文本和线条)未正确居中的问题。这是我的问题之前和之后的情况。后图像也显示在手机屏幕 before after在屏幕上对中横幅图像调整大小
相同的结果该图像的HTML去如下:
生效的唯一CSS是
我希望无论屏幕宽度如何,图像的“评审我们”文本部分都是居中(从左到右)
您可能遇到的问题可能是从桌面到手机,汉堡包菜单会移动您的徽标。使用绝对位置与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>
的变换:翻译工作。感谢m8! –
你可以试试下面的CSS:
div.rowBanner {
margin-left:auto;
margin-right:auto;
width:80%;
}
没有运气。当图像超过屏幕尺寸时,无法居中。 –
就在这个CSS添加到图像:
div.rowBanner > img {
display: block;
margin: 0 auto;
max-width: 100vw;
}
编辑:增加了一个最大的一起的IMG,100vw意味着100个视口宽度单位,见:http://caniuse.com/#feat=viewport-units
没有运气。当图像超过屏幕尺寸时,无法居中。 –
我刚刚更新了我的回复 –
关于使用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>
是在不同的分辨率,我们没有远远不够的代码在这里可以诊断这个问题。请参阅:https://*.com/help/mcve –
显示您的所有横幅HTML。我确定你的横幅标识是在错误的地方〜。〜 –