我有一个固定标题和标题下方的图像。
图像有一个属性position:fixed
。
现在,对于某些设备,图像并不像应有的那样位于中心。
Here's fiddle 。
左侧的空间比右侧多。
还在图像上方,我想添加一个 p
标记,该标记由于某种原因未显示。
请让我知道这里出了什么问题。
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<P class="step1description" See price</p>
</div>
</div>
</div>
</div>
</div>
最佳答案
查看此解决方案:
body, html {
margin:0;
padding:0;
}
.content-wrapper {
position: relative;
overflow: hidden;
width: 100%;
background-color: #333230;
}
.content-wrapper .center-logo {
position: fixed;
width: 100%;
top: 125px;
left:0;
text-align: center;
margin: 5px 0 15px;
z-index: 1001;
background-color: #333230;
}
.content-wrapper .center-logo img {
margin: 0 auto;
}
.center-logo p.step1description {
position: relative;
top: -30px;
width: 220px;
text-align: center;
color: #fff;
font-size: 12px;
margin: 0 auto;
}
.description {
margin:30px 0 30px 0 !important;
}
.content-wrapper .content {
text-align: center;
width: 100%;
}
.new-class{
padding-bottom: 134px;
top: 134px;
}
<div class="content-wrapper new-class">
<div class="container">
<div class="row">
<div class="col-xs-12 ">
<div class="center-logo description">
<img src="http://i.imgur.com/ECTLTbK.png" alt="" class="img-responsive">
<p class="step1description"> See price</p>
</div>
</div>
</div>
</div>
</div>
你的 html 和 css 有一些拼写错误! - 在这里您可以找到一个可用的 fiddle :http://jsfiddle.net/sebastianbrosch/cxumhp9k/1/
关于html - 将所有设备的固定位置图像对齐在中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33230836/