Question

我有一个固定的标题和标题下面的图像。

图片的属性为position: fixed。

现在对于某些设备，图像不在应有的中心。

https://developers.google.com/web/fundamentals/native-hardware/click-to-call/?hl=en小提琴。

左侧的空间比右侧多。

同样在图片上方，我想添加一个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>

Answer 1

在left:0

上添加.content-wrapper .center-logo

.content-wrapper .center-logo { left:0;}

Answer 2

查看此解决方案：

＆＃13;

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;
}

＆＃13;

 <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>

＆＃13;

你在html和css上有一些错别字！ - 在这里你可以找到一个工作小提琴：http://jsfiddle.net/sebastianbrosch/cxumhp9k/1/

将固定位置图像对准所有设备的中心

2 个答案: