CSS / HTML5 的大小问题

Question

我目前正在做一个小网站。我有几个关于我的一些按钮的定位、大小、对齐的问题...

我希望我的盒子始终位于屏幕中央(✔)。
我想要一个自适应按钮方案，以便当 window 变得足够小时它们可以相互堆叠。目前，它们都捆绑在一起，一旦页面达到一定大小就无法阅读（如下图所示）。
我希望我的注册文本位于我的两个按钮的底部。它目前在他们的右侧。此外，当 window 达到一定大小时，框需要彼此重叠而不是并排，我希望我的注册文本跟随并进入第二个框下方。下面我将分享我的代码（both html & CSS）并且我会发送网站当前状态的图片。

提前致谢。

CSS 代码

body{
    margin-top: 300px;
    text-align: center;
}


.ownerButton, .employeeButton {
    background-color: #333;
    text-align: center;
    text-decoration: none;
}



.ownerButton, .employeeButton {
    font-family: "georgia", sans-serif;
    font-size: 24px;
    padding: 1em 2em;
    margin: 3px;
    border: 0;
    outline: 0;
    color: #000000;
    background-color: #2196F3;
    text-transform: uppercase;
    border-radius: 0.15em;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

    font-weight: bold;

    overflow: hidden;
    position: relative;
}

.footer{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    background-color: #2196F3;
    text-align: center;
}

HTML 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
      <title>Belper</title>
  <link rel="stylesheet" href="style.css">
    </head>
    <body bgcolor=#4286f4>

        <a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a>
        <a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a>

        <a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a>

        <div class="footer">
        <p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p>
        </div>

    </body>
</html>

Image while window is large

Image while window is small

Answer 1

您可以将 display:block 添加到您的样式 sheet 中的 .signUp 规则，以在新行中获取它。

您还可以将 display: inline-block 添加到 .ownerButton, .employeeButton 规则

https://codepen.io/jbanegas/pen/xXpMKM?editors=1100

CSS / HTML5 的大小问题

Sizing issue with CSS / HTML5

html

css

resize

alignment