Question

当我调整浏览器大小时，我的按钮会在页面上的任何位置。同样在移动设备上，它没有定位在应有的位置。其他元素呢。你能帮我么？

HTML：

<div id="wrapper">

        <div id="header">

            <div id="header-name">
                <table>
                    <tr>
                        <td id="header-name-cell">
                            <a href="./index.html">
                                Nl-Darts
                            </a>
                        </td>
                        <td>
                            Voor al uw dart nieuws!
                        </td>
                    </tr>
                </table>
            </div>

        </div>


        <div id="content">

            <div id="landingpage-intro">

                <h2>I gotta piss</h2>
                <p>
                    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine.
                    You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water.
                    We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem,
                    we are connected, you and I. We're on the same curve, just on opposite ends.
               </p>

                <h2>No, motherfucker</h2>
                <p>
                    Well, the way they make shows is, they make one show. That show's called a pilot.
                    Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
                    Some pilots get picked and become television programs. Some don't, become nothing.
                    She starred in one of the ones that became nothing.
               </p>

            </div>

            <div id="landingpage-button"><a id="landingpage-link" href="http://www.google.com">Go to full website</a></div>

        </div>


        <div id="footer">

        </div>

    </div>

CSS：

body{
  background-image: url("../images/dart-wallpaper.jpg");
  background-attachment: fixed;
  background-size: cover;
}

#wrapper{
  height: 100%;
  width: 100%;
}

#content{
  position: relative;
  top: 60px;
  left: 10%;

  width: 80%;
  min-height: 500px;
  height: auto;

  background-color: rgba(0, 0, 0, 0.5);
  color:white;

  border-radius: 10px;
}



#landingpage-button{
    width:290px;
    height: 50px;
    background-color: rgba(208, 208, 208, 0.7);

    text-align: center;
    line-height: 50px;

    position: inherit;
    left: 40%;
    top: 50px;

    border-radius:5px;
}

我尝试了多种方法，例如改变位置相对/绝对和一些不同的东西，但它仍然在继续移动。

也有人在定位元素时有更多想法吗？

提前致谢

Answer 1

它的行为就是这样，因为你将左侧属性设置为40％。它总是试图从左边40％。删除：

position: inherit;
left: 40%;
top: 50px;

来自#landingpage-button并添加：

margin: 50px auto 0; //50px from top, auto left-right and 0px to bottom

如果您想将它放在容器的中心，请执行此操作。我做了一个例子here。

Answer 2

Florin的答案应该有效，但我想建议使用em而不是px。 Em可以用作相对测量单位。

当我调整浏览器大小时，按钮会在屏幕上移动

2 个答案: