Question

我尝试在这个网站上研究这个问题，但一切都与我的特定网站无关。几乎我在我的主页上有一个背景图像，背景是＆＃34;修复＆＃34;并且＆＃34;覆盖＆＃34;。我不确定这是不是因为它不起作用的原因。我想要＆＃34; View Works＆＃34;按钮位于计算机的中央。请帮忙！

HTML：

->with()

CSS

    <html>

    <head>
    <meta charset="UTF-8">
    <title>Kasia's Website </title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>

    <body>

  <div class="wrapper">
    <a href="works.html">
      <input class="butt" type="button" value="VIEW WORKS" />
    </a>
  </div>

  <div id="page">
    <div id="sidebar">
      <div>
        <a href="index.html"><img id="logo"    
    src="http://i66.tinypic.com/xnf4us.png" /></a>
      </div>
      <div>
        <ul class="sb">
          <li><a href="index.html"> Home</a> </li>
          <li><a href="about.html"> About</a> </li>
          <li><a href="works.html"> Works</a> </li>
          <li><a href="contact.html"> Contact</a> </li>
        </ul>
      </div>


      <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
      </div>

       </div>


      <script    
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  
    </script>

    <script>
      $(document).ready(function(){
          $('#sidebar-btn').click(function(){
              $('#sidebar').toggleClass('visible');
          });

      });
    </script>

    </div>


    </body>

    </html>

http://codepen.io/kasiariele/pen/MaLdWv/

为了直观地看到错误，您可能需要进入全屏模式（http://codepen.io/kasiariele/full/MaLdWv/）或将屏幕缩小，以便您可以看到它滚动。

谢谢。

Answer 1

请勿使用margin来“集中”您的元素。

您可以添加此代码，button将水平和垂直居中，而无需调整旧代码：

.butt {
  margin: 0; /* reset your old margin */
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

检查browser support for transforms以及所需的任何额外前缀（{9}为ie9）。

按钮不会停留在背景图像上

1 个答案: