html - 我的布局有什么问题？带有 iframe 的固定 header

Question

我正在尝试为网站演示制作一个 iframe，所以我想添加一个固定的 header 。为什么我右边的“立即购买”按钮会越来越低？我已经尝试了一些东西，但我不是编码员。

这是我的代码:

#headerfix {
    height: 60px;
    background-color:#000;
    border-bottom: 2px solid gold;
    z-index: 99999;
    position: fixed;
    width: 100%;
}

.button {
   border: 2px solid gold;
   background: #ff9900;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#ff9900));
   background: -webkit-linear-gradient(top, #ffff00, #ff9900);
   background: -moz-linear-gradient(top, #ffff00, #ff9900);
   background: -ms-linear-gradient(top, #ffff00, #ff9900);
   background: -o-linear-gradient(top, #ffff00, #ff9900);
   background-image: -ms-linear-gradient(top, #ffff00 0%, #ff9900 100%);
   padding: 7.5px 15px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #303030 0 1px 0;
   color: #000000;
   font-size: 18px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 2px solid #d9ff00;
   text-shadow: #1e4158 0 1px 0;
   background: #ffff00;
   background: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ffff00));
   background: -webkit-linear-gradient(top, #ff9900, #ffff00);
   background: -moz-linear-gradient(top, #ff9900, #ffff00);
   background: -ms-linear-gradient(top, #ff9900, #ffff00);
   background: -o-linear-gradient(top, #ff9900, #ffff00);
   background-image: -ms-linear-gradient(top, #ff9900 0%, #ffff00 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 2px solid #d9ff00;
   background: #ff9900;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#ffff00));
   background: -webkit-linear-gradient(top, #ffff00, #ff9900);
   background: -moz-linear-gradient(top, #ffff00, #ff9900);
   background: -ms-linear-gradient(top, #ffff00, #ff9900);
   background: -o-linear-gradient(top, #ffff00, #ff9900);
   background-image: -ms-linear-gradient(top, #ffff00 0%, #ff9900 100%);
   color: #000000;
   }
#preview-frame {
    margin: 0 auto;
    display: block;
    padding-top: 60px;
    width:100%;
    height: 581px;
}

<div id="headerfix">

    <section style="width:15%; float:left;"><img style='padding-left: 10px;  padding-top: 2.5px;' src="https://turnkey-shop.com/wp-content/uploads/2017/11/demo-tunkey-icon.png" alt="Turnkey-Shop.com"></section>
    
    <section style='padding-left:15%; padding-top:8px; width:70%; text-align:center; float:none; font-size:25px; color:gold;'>Product Name</section>
    
    <section style='padding-left:15%;  width:70%; text-align:center; float:none; font-size:12px; color:gold;'>SKU</section>
    
    <section style='padding-left:85%;  width: 15%; float:none; '><a href='https://turnkey-shop.com/' class='button'>Buy Now</a></section>
     
     </div>
 
 

<iframe id="preview-frame" src="https://turnkey-shop.com/" frameborder="0"></iframe>

我希望我的按钮位于顶部栏的中心。

Answer 1

在该部分中使用 margin-top 属性正确对齐您的按钮

fiddle :http://jsfiddle.net/sanchitpatiyal95/QQKc4/184/