如何在标题下对齐按钮，并使按钮响应？答案

【问题标题】：How do I align my button under my heading, and make the button responsive?如何在标题下对齐按钮，并使按钮响应？
【发布时间】：2018-11-14 07:43:40
【问题描述】：

我试图在标题下放置一个按钮，但该按钮被推到一边。我认为它与绝对位置或其他东西有关，但我不太确定。我还想让按钮像文本一样响应，以便按钮的大小在不同的窗口中发生变化。

HTML：

    body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      display: flex;
      justify-content: left; /* align horizontal */
      align-items: center; /* align vertical */
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-align: center;
        text-decoration: none;
        font-size: 1w;
    }

<div class="splash">
        <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
    </div>

https://codepen.io/anon/pen/qQraNB

感谢任何帮助，谢谢！

【问题讨论】：

据我所知，按钮在中间而不是在侧面
font-size: 1w; in .button { 无效

标签： html css button position

【解决方案1】：

你使用display:flex 什么使它们在同一行，所以：

1.从.splash中删除display:flex

2.font-size: 1w; in .button {} 无效，改为font-size: 2.5vw;

您可以使用margin-left: 4.5em; 按钮

See code in fiddle:

   body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-decoration: none;
        font-size: 2.5vw;
        margin-left: 4.5em;
    }

<div class="splash">
     <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
</div>

【讨论】：

【解决方案2】：

在标题标题上设置了padding-bottom: 3.5em;，它将标题向上推，如果您将填充底部移开，则按钮应在它们上垂直对齐。

【讨论】：